Question

我正在构建一个照片库，我只想在内容“DIV”元素进入视口时加载图像。我正在使用jquery viewport.js。

默认情况下，我将每个“IMG”标签的src属性设置为“LOADING.JPEG”，当任何div进入视口时，我将IMG标签的src属性更改为真实图像。但更改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);
     }
});

非常感谢任何帮助或建议。

由于

Answer 1

为什么要让它复杂化？试试这个 -

$(".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);
     }
});

Answer 2

您是否尝试过使用Lazy Load jQuery plugin？

当它们在视口中时，这将轻微淡入某些图像。设置也很容易，只需为每个图像调用数据属性：

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

并像这样启动它：

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

元素仅进入视口时的图像加载

2 个答案: