我正在建立一个摄影作品集.我有两个相邻的div列左侧浮动,每个列包含一长列图像,大小为列宽度的100%.这使得一个很好的垂直方向的照片网格.但是,左列需要在右列开始加载之前完全加载,这可能需要很长时间.我希望从顶部同时加载两列,以便在用户加载页面时,首先可以看到列顶部的两个图像.
我纠正这个问题涉及jQuery Lazyload.但是,它似乎不想正常工作.它不是在滚动页面时加载图像,而是立即加载整个左列,然后加载整个右列.我想解决这个问题,以便它首先在每列的顶部加载前几个图像,然后在滚动时加载其他图像.
提前致谢!
使用Javascript:
$(document).ready(function () { $(".leftcol img").lazyload({ failure_limit : 4,effect : "fadeIn",threshold : 10 }); $(".rightcol img").lazyload({ failure_limit : 4,threshold : 10 }); $(window).trigger('scroll'); });
HTML:
<div class="leftcol col"> <div class='item'> <a href='filename.jpg> <img src='js/holder/holder.js/200x300' data-original='filename.jpg' alt='' /> </a> </div> <div class='item'> <a href='filename.jpg> <img 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 src='js/holder/holder.js/200x300' data-original='filename.jpg' alt='' /> </a> </div> <div class='item'> <a href='filename.jpg> <img 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; }
解决方法
原文地址:https://www.jb51.cc/jquery/177347.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。