gpt4 book ai didi

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

转载 作者:技术小花猫 更新时间:2023-10-29 11:11:11 26 4
gpt4 key购买 nike

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

最佳答案

我遇到了同样的问题,将 failure_limit 参数增加到 9999 之类的值就成功了。

文档 ( http://www.appelsiini.net/projects/lazyload ) 说“将 failure_limit 设置为 10 会导致插件在找到 10 张图片后停止搜索要加载的图片。如果您的布局很时髦,请将此数字设置为较高的值。”

这将被归类为“时髦”。

关于jquery - 同时在两个单独的列中延迟加载图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16012178/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com