Using Ajax lazy load

Question

I created a database where I store all the images' names so that I can retrieve it later on. To retrieve the images' names, I use ajax and bind it with <img> tag:

$.post('image_name.php',{id:id}, function(data){
   $('#container').html('<img src="img/'+data+'">');
});

Everything works great. But what I noticed was, all the images shows up at the same time which slows the process a little bit. Therefore, I am thinking that the best way to handle this issue is to use lazy load. I want any data that is ready to be displayed.... but I do not know how to.

Additonal Info: I am trying to create a list of thumbnails. Just like the Imgur sidebar (https://i.sstatic.net/BbtPn.jpg)

how about using a jQuery plugin? appelsiini.net/projects/lazyload — Robin Manoli
– Robin Manoli, Commented May 4, 2013 at 21:51
I am not trying to lazy load the image, I am trying to lazy load the data I am retrieve from my database — user2310422
– user2310422, Commented May 4, 2013 at 22:03
ok...and to clarify, you want to lazy load image src's which are not visible on screen? — Robin Manoli
– Robin Manoli, Commented May 4, 2013 at 22:06
i am trying to lazy load this data "function(data)". lazy load image is a different topic. — user2310422
– user2310422, Commented May 4, 2013 at 22:08
apply your code when your images are supposed to be loaded, or if you only want to lazy load src data, only set that data like $("img").attr("src",data) — Robin Manoli
– Robin Manoli, Commented May 4, 2013 at 22:10

peku33 · Accepted Answer · 2013-05-04 22:41:14Z

1

If you plan to create a list with left / right button:

With ajax fetch array of next 6 images. Only names or ids.
On ajax success:
- create a loop for array of images $(array).each in jquery is nice!
- in loop cycle set one time timer (http://archive.plugins.jquery.com/project/timers is great) for each image. Use index of array * Interval * 1000 (1000ms for 1 sec)

Whole idea is:

onsuccess:
    $(whatyougotfromajax).each(function(index, value)
    {
        $.oneTime(index * Interval * 1000, function()
        {
            $('#block').append('<img src="sth.php?Id=' + value + '">');
        });
    });

I im not sure... Not, I'm sure it is not work in this way, but you've got the idea

answered May 4, 2013 at 22:41

peku33

3,9833 gold badges32 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Using Ajax lazy load

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related