7

我正在建立一个摄影作品集。我有两个相邻的 div 列向左浮动，每个列都包含一长串图像，大小为列宽的 100%。这样就形成了一个很好的垂直方向的照片网格。但是，左列需要在右列开始加载之前完全加载，这可能会花费大量时间。我希望两列同时从顶部加载，以便在用户加载页面时，列顶部的两个图像首先可见。

我试图纠正这个问题涉及 jQuery Lazyload。但是，它似乎不想正常工作。它不是在滚动页面时加载图像，而是一次加载整个左列，然后加载整个右列。我想解决这个问题，以便它首先加载每列顶部的前几张图像，然后在滚动时加载其他图像。

提前致谢！

Javascript：

$(document).ready(function () {
    $(".leftcol img").lazyload({
        failure_limit : 4, 
        effect : "fadeIn",
        threshold : 10
    });
    $(".rightcol img").lazyload({ 
        failure_limit : 4, 
        effect : "fadeIn",
        threshold : 10
    });
    $(window).trigger('scroll');
});

HTML：

<div class="leftcol col">
 <div class='item'>
   <a href='filename.jpg>
    <img data-src='js/holder/holder.js/200x300' data-original='filename.jpg' alt='' />
   </a>
 </div>
 <div class='item'>
   <a href='filename.jpg>
    <img data-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 data-src='js/holder/holder.js/200x300' data-original='filename.jpg' alt='' />
   </a>
 </div>
 <div class='item'>
   <a href='filename.jpg>
    <img data-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;
}
4

1 回答 1

5

我遇到了同样的问题，将 failure_limit 参数增加到 9999 就可以了。

文档（http://www.appelsiini.net/projects/lazyload）说“将 failure_limit 设置为 10 会导致插件在找到首屏下方的 10 个图像后停止搜索要加载的图像。如果您有一个时髦的布局，请将此数字设置为高的东西。”

这将被归类为“时髦”。

于 2013-06-07T03:24:13.340 回答