同時に2つの別々の列に画像を遅延読み込み

写真ポートフォリオを構築しています。私は2つの隣接するdiv列を左に浮かべて、それぞれに列の幅の100％の大きさの画像の長いリストを含んでいます。これは、垂直方向に向いた写真のグリッドに適しています。ただし、左側の列は、右側の列が読み込まれる前に完全にロードする必要があり、時間がかかることがあります。 2つの列が上から同時に読み込まれるようにして、ユーザーがページを読み込むときに列の上部にあるイメージの両方が最初に表示されるようにします。同時に2つの別々の列に画像を遅延読み込み

これを修正するには、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; 
}

出典

2013-04-15 skiindude22