jQuery.Lazyload 滚动图片加载问题。大家讨论下。
0
[待解决问题]
看了几篇关于滚动加载图片的 文章。。大致有两类。一种是
//先载入jquery <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> //再载入lazyload <script type="text/javascript" src="http://www.jo2.org/js/jquery.lazyload.js"></script> <script type="text/javascript"> jQuery(document).ready( function($){ $("img").lazyload({ placeholder : "http://www.jo2.org/js/grey.gif", //加载图片前的占位图片 effect : "fadeIn" //加载图片使用的效果(淡入) }); }); </script>
下面这种方法和上面差不多唯一的区别是 在加载的时候 给img 加了个自定义标签。。来存放图片路径。。而 img 标签 src 则用一个很小的 图片来 占位。 然后等页面加载完后在通过代码 在滚动到 相应图片位置的时候 才去把 img 的src 设置为对应的地址。
html 代码：
<img class="scrollLoading" data-url='/images/1.jpg' src='/style/cut/noneimg.gif' style=" width:162px; height:162px;" />
js代码：
<script src="../Scripts/jquery.scrollLoading.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$(".scrollLoading").scrollLoading();
});
</script>
不知道这两种方法 哪种更好。。各位指点 发表下自己的看法。
所有回答(2)
0
关于 图片 延时加载 ，这个没有处理过，但是看你贴的代码，两种方式其实原理是一样的，
都是先用一张图片占位，然后判断元素位置，来做相关处理 。
第一种方式：
优：原有 dom 结构、属性不变，不用修改现有的代码，html 也比较少，相对来说也会更快的加载渲染页面！
劣：后期用 js 进行 dom 操作，获取图片地址，做一些处理。
第二种方式：
优：后期只需要从图片元素取出属性 进行 src 切换即可
劣：前期就需要把代码结构准备后，html 会增加，如果有修改，可能不方便！
个人建议 使用第一种方式吧 ！
1
第一种不好，是假的，图片加载完了之后再替换成占位图，然后滚动的时候再替换回来的，根本就i没有起到懒加载的作用，首屏就全部加载了，对速度一点改善都没有，反而会减慢速度，推荐第二种，才是真的懒加载。
