Tôi đang xây dựng danh mục đầu tư nhiếp ảnh. Tôi có hai cột div liền kề nổi bên trái, mỗi cột chứa một danh sách dài các hình ảnh có kích thước đến 100% chiều rộng của các cột. Điều này làm cho một mạng lưới ảnh theo chiều dọc được định hướng tốt đẹp. Tuy nhiên, cột bên trái cần tải hoàn toàn trước khi cột bên phải bắt đầu tải, có thể mất nhiều thời gian. Tôi muốn cho hai cột tải đồng thời từ các đỉnh, sao cho cả hai hình ảnh ở đầu các cột được hiển thị đầu tiên khi người dùng tải trang.Tải hình ảnh trong hai cột riêng biệt đồng thời
Lỗi của tôi khi sửa lỗi này liên quan đến jQuery Lazyload. Tuy nhiên, nó dường như không muốn hoạt động đúng cách. Thay vì tải hình ảnh khi bạn cuộn trang, nó đang tải toàn bộ cột bên trái cùng một lúc và sau đó tải toàn bộ cột bên phải. Tôi muốn sửa lỗi này để nó tải một vài hình ảnh đầu tiên ở đầu mỗi cột đầu tiên, sau đó tải các hình ảnh khác khi bạn di chuyển.
Cảm ơn trước!
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;
}