仅当元素进入视口时才会加载图像

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

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

谢谢

来源

2013-04-22 coder

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

$(".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-22 17:22:57

感谢穆罕默德您的回复，其我的HTML结构，是的我们也可以按照您的建议来做。但它会更改图像的src标记，但不会刷新imgae。 – coder 2013-04-22 17:44:46

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

当它们在视口中时，它会轻轻地淡入一些图像。很容易的设置也一样，你只需要调用在每个图像的数据属性：

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

，并启动它喜欢它这样：

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

来源

2013-04-26 10:34:51 egr103

仅当元素进入视口时才会加载图像

回答

相关问题