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;
}