我正在建立一个摄影作品集.我有两个相邻的div列左侧浮动,每个列包含一长列图像,大小为列宽度的100％.这使得一个很好的垂直方向的照片网格.但是,左列需要在右列开始加载之前完全加载,这可能需要很长时间.我希望从顶部同时加载两列,以便在用户加载页面时,首先可以看到列顶部的两个图像.
我纠正这个问题涉及jQuery Lazyload.但是,它似乎不想正常工作.它不是在滚动页面时加载图像,而是立即加载整个左列,然后加载整个右列.我想解决这个问题,以便它首先在每列的顶部加载前几个图像,然后在滚动时加载其他图像.
提前致谢！
使用Javascript：
$(document).ready(function () {
$(".leftcol img").lazyload({
failure_limit : 4,effect : "fadeIn",threshold : 10
});
$(".rightcol img").lazyload({
failure_limit : 4,threshold : 10
});
$(window).trigger('scroll');
});
HTML：
<div class="leftcol col">
<div class='item'>
<a href='filename.jpg>
<img src='js/holder/holder.js/200x300' data-original='filename.jpg' alt='' />
</a>
</div>
<div class='item'>
<a href='filename.jpg>
<img src='js/holder/holder.js/200x300' data-original='filename.jpg' alt='' />
</a>
</div>
</div>
<div class="rightcol col">
<div class='item'>
<a href='filename.jpg>
<img src='js/holder/holder.js/200x300' data-original='filename.jpg' alt='' />
</a>
</div>
<div class='item'>
<a href='filename.jpg>
<img src='js/holder/holder.js/200x300' data-original='filename.jpg' alt='' />
</a>
</div>
</div>
CSS：
.item{
width:100%;
float: left;
margin-bottom:8px;
clear:both;
}
.item img{
width:100%;
}
.col{
max-width:650px;
width:45%;
float:left;
margin-right:12px;
}
解决方法
我有同样的问题,并将failure_limit参数增加到像9999这样的技巧.
文档(http://www.appelsiini.net/projects/lazyload)说“将failure_limit设置为10会导致插件在找到10个图像后停止搜索要加载的图像.如果你有一个时髦的布局,将这个数字设置为高.”
这将被归类为“时髦”.
