Image load when the element comes into the viewport only

Question

I am building a photo gallery and i wants to load the images only when the content "DIV" element comes into the viewport.I am using jquery viewport.js for this.

By default i am setting the src attribute of each "IMG" tag to "LOADING.JPEG" and when any div comes into the viewport i change the src attribute of IMG tag to the real image.But after changing the SRC attribute image do not change it still shows the LOADING.JPEG.

$(".content").each(function(i,obj){
     var element = obj.id;
     if($("#"+element).is(':in-viewport')){
         var link = $("#"+element+" div a").attr('href');
         //set the image src from loading to read image
         $("#"+element+" div a img").attr('src',link);
     }
});

Any help or suggestion would be greatly appreciated.

Thanks

Adil Shaikh · Answer 1 · 2013-04-22T17:47:59.517

2

Why you are making it complex - ? Try this -

$(".content").each(function(i,obj){  
     if($(this)).is(':in-viewport')){
         var link = $("div a",this).attr('href');
         //set the image src from loading to read image
         $("div a img",this).prop('src',link);
     }
});

edited Apr 22 '13 at 17:47

answered Apr 22 '13 at 17:22

Adil Shaikh

44,509
17
89
111

Thanks Mohammad for your reply , its my html structure , and yes we can do it also as you suggested.But it changes the image src tag but do not refresh the imgae. – coder Apr 22 '13 at 17:44

score 0 · Answer 2 · answered Apr 26 '13 at 10:34

Have you tried using the Lazy Load jQuery plugin?

This will gently fade in some images when they are in viewport. Easy enough to setup too, you just call in a data attribute for each image:

<img class="lazy" data-original=“img/example.jpg” src=“img/grey.gif” width=“640” height=“480”>

and initiate it like it so:

$("img.lazy").lazyload();

Image load when the element comes into the viewport only

2 Answers2