3

我正在构建一个照片库，我只想在内容“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);
     }
});

任何帮助或建议将不胜感激。

谢谢

4

2 回答 2

2

为什么你让它变得复杂 - ？尝试这个 -

$(".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);
     }
});
于 2013-04-22T17:22:57.793 回答
0

您是否尝试过使用延迟加载 jQuery 插件？

当它们在视口中时，这将在某些图像中逐渐淡化。设置起来也很容易，您只需为每个图像调用一个数据属性：

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

并像这样启动它：

$("img.lazy").lazyload();
于 2013-04-26T10:34:51.003 回答