Javascript 在div中的视口中使用溢出异步加载图像:滚动;
我的内容有以下结构:Javascript 在div中的视口中使用溢出异步加载图像:滚动;,javascript,jquery,Javascript,Jquery,我的内容有以下结构: <div id="content" style="overflow:scroll;height:500px; width: 500px;"> <div style="width:500px;height:100px;> <img src='http://graph.facebook.com/user1/picture?width=50&height=50'> </div> <di
<div id="content" style="overflow:scroll;height:500px; width: 500px;">
<div style="width:500px;height:100px;>
<img src='http://graph.facebook.com/user1/picture?width=50&height=50'>
</div>
<div style="width:500px;height:100px;>
<img src='http://graph.facebook.com/user2/picture?width=50&height=50'>
</div>
...
<div style="width:500px;height:100px;>
<img src='http://graph.facebook.com/userN/picture?width=50&height=50'>
</div>
</div>
...
如果您认为这是因为div,为什么不删除它们:
<div id="content" style="overflow:scroll;height:500px; width: 500px;">
<img height='100' width='500' src='http://graph.facebook.com/user1/picture?width=50&height=50'>
<img height='100' width='500' src='http://graph.facebook.com/user2/picture?width=50&height=50'>
...
</div>
...
我曾经详细阐述过以下代码
首先,将html更改为仅从第一个页面获取图像:
<div id="content" style="overflow:scroll;height:100px; width: 100px;">
<div style="width:500px;height:100px;">
<img src='http://graph.facebook.com/user1/picture?width=50&height=50' />
</div>
<div style="width:500px;height:100px;">
<img msrc='http://graph.facebook.com/user2/picture?width=50&height=50'/>
</div>
...
<div style="width:500px;height:100px;">
<img msrc='http://graph.facebook.com/userN/picture?width=50&height=50'/>
</div>
</div>
请不要在生产中使用此选项,应首先优化代码
这里有一个链接:那么你的问题是“我如何让lazyload工作?”?如果能让它与jquery.lazyload一起工作会很好,但我不介意我的问题有不同的解决方案。这看起来很简单,@Alepac!非常感谢。
$(function(){
var content = $("#content");
function isScrolledIntoView(elem)
{
var divViewTop = content.scrollTop();
var divViewBottom = divViewTop + content.height();
var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();
return ((elemBottom <= divViewBottom) && (elemTop >= divViewTop));
}
content.scroll(function(e){
content.find("img").each(function(i,e){
if(isScrolledIntoView(e)){
$(e).attr("src",$(e).attr("msrc"));
}
});
});
});