Question

在照片库中，所有图像都加载到厚箱中，我想在其容器div进入视口时加载滑块的原始缩略图。我的HTML结构是：

<div id="container">
<div class="content">
<div>
<a href="path1"><img src="default-loading.gif" data-original="img1"/></a>
</div>
</div>
<div class="content">
<div>
<a href="path1"><img src="default-loading.gif" data-original="img1"/></a>
</div>
</div>
<div class="content">
<div>
<a href="path2"><img src="default-loading.gif" data-original="img2"/></a>
</div>
</div>
<div class="content">
<div>
<a href="path3"><img src="default-loading.gif" data-original="img3"/></a>
</div>
</div>

Container有多个内容块，每个块都有一个img标记。我正在使用jquery viewport.js绑定每个“content”div上的事件。

$(".content").each(function(){
if($(this).is(':in-viewport')){
//change src of image
}
});

但它标识了可见模式下的所有内容块。

我的要求是只加载那些仅来到视口的图像。

任何帮助或建议都会受到极大关注。

由于拉夫

Answer 1

Mika的Viewport Selectors插件适用于浏览器窗口视口，而不适用于html元素。换句话说，如果你有一些像#container{width:350px;height:150px;overflow:auto;}这样的CSS，它在滚动时就不起作用了。

我建议您尝试使用其他插件Lazy Load

以下是一个示例：http://jsbin.com/efazos/1/edit

仅当图像标记容器进入视口时才加载图像

1 个答案: