Загрузка изображения только тогда, когда элемент входит в область просмотра

Я создаю фотогалерею, и я хочу загружать изображения только тогда, когда элемент содержимого «DIV» входит в область просмотра. Для этого я использую jquery viewport.js.

По умолчанию я устанавливаю для атрибута src каждого тега "IMG" значение "LOADING.JPEG", и когда какой-либо div входит в область просмотра, я меняю атрибут src тега IMG на реальное изображение. Но после изменения атрибута SRC изображение не измените, он по-прежнему показывает 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);
     }
});

Приветствуется любая помощь или предложение.

Спасибо


jquery image-loading viewport
person coder    schedule 22.04.2013    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Почему вы усложняете -? Попробуй это -

$(".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);
     }
});
person Mohammad Adil    schedule 22.04.2013
comment
Спасибо Mohammad за ваш ответ, это моя структура html, и да, мы можем сделать это также, как вы предложили. Но он изменяет тег изображения src, но не обновляет imgae. - person coder; 22.04.2013

arrow_upward
0
arrow_downward

Вы пробовали использовать плагин jQuery с отложенной загрузкой?

Это будет мягко исчезать на некоторых изображениях, когда они находятся во вьюпорте. Достаточно легко настроить, вы просто вызываете атрибут данных для каждого изображения:

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

и запустить его так:

$("img.lazy").lazyload();
person egr103    schedule 26.04.2013