jquery - 仅当图像标签容器进入视口时才加载图像

Question

在照片库中，所有图像都加载到 Thickbox 中，我想在其容器 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>

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

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

但它以可见模式识别所有内容块。

我的要求是只加载那些只进入视口的图像。

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

谢谢高拉夫

Answer 1

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

我建议尝试他的另一个插件，延迟加载

这是一个例子：http: //jsbin.com/efazos/1/edit