同时在两个单独的列中延迟加载图像

Question

我正在建立一个摄影作品集.我有两个相邻的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;
}

Answer 1

I had the same issue and increasing the failure_limit parameter to something like 9999 did the trick.

The documentation (http://www.appelsiini.net/projects/lazyload) says "Setting failure_limit to 10 causes plugin to stop searching for images to load after finding 10 images below the fold. If you have a funky layout set this number to something high."

This would be classified as "funky".