jQuery lazyload 图片懒加载实现

时间：2017-07-17 13:18:31 阅读：200 评论：0 收藏：0 [点我收藏+]

现在网站页面内容越来越丰富，图片内容也越来越多，而图片过多会导致网页文件过大，从而引发加载缓慢的问题，而图片懒加载就是为解决这一问题而生。

首先我们来讲Jquery的懒加载控件

jQuery lazyload.JS

　　jQuery lazyload.JS 地址：https://github.com/helijun/helijun/blob/master/plugin/lazyLoad/jquery.lazyload.js 直接复制源码到本地

　　jQuery lazyload.JS是用 jQuery编写的一个控件，所以要运行 jQuery lazyload.JS必须先载入 jQuery

1、请将下列代码加入</body>前:

　　<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
　　<script type="text/javascript" src="jquery.lazyload.js"></script>
2、首先图片大小必须设置，然后删除图片的src标签,将图片的地址放在data-original属性上，给懒加载图像一个特定的class（例如:lazy）
代码如下：
　　<img class="lazy" alt="" width="800" height="5000" data-original="img/lazy1.jpg" />
　　$(function() {
　　 　　$("img.lazy").lazyload();
　　});
3、效果设置更改
　　 jQuery lazyload.JS在加载时有很多选项可以设置：
　　1、设置临界点
　　　　默认情况下图片是进入屏幕区域后再加载. 如果你想提前加载图片, 可以设置threshold 选项, 比如设置 threshold 为 150 令图片在距离屏幕 150 像素时提前加载.　　　
　　　　$("img.lazy").lazyload({
 　　　　　　threshold : 200
　　　　});
　　2、事件触发加载
　　　　也可以通过各类事件来触发加载，如点击事件：
　　　　$("img.lazy").lazyload({
 　　　　　　event : "click"
　　　　});
　　3、特效加载
　　　　默认是调用show()进行加载，你当然可以使用你想要的效果来实现。比如下面的代码使用fadeIn （淡入效果）：　　　　
　　　　$("img.lazy").lazyload({
 　　　　effect : "fadeIn"
　　　　});
　　4、提前加载图片
　　　　你也可以设定提前加载几张图片来提升网页浏览的连贯性，这由failure_limit的值来决定：　　　　
　　　　$("img.lazy").lazyload({
 　　　　　　failure_limit : 2
　　　　});
　　5、加载隐藏的图片
　　　　Lazy Load 默认忽略了隐藏图片. 如果你想要加载隐藏图片, 请将 skip_invisible 设为 false：
　　　　$("img.lazy").lazyload({ 
 　　　　　　skip_invisible : false
　　　　});
4、为了在某些浏览器或用户未启用JS或js控件加载失败的情况下实现优雅降级, 可以添加noscript标签，然后通过 CSS 先隐藏带控件的img元素，同时让控件执行成功时先运行show()方法将img元素显示出来，再运行懒加载.
最后代码如下：
 <style type="text/css"> 
        　　img {
            　　width: 100%;
        　　}
        　　.lazy{display: none;}
    </style>
	<img src="lun1.jpg" ><br>
	<img src="lun2.jpg" ><br>
	<img data-original="lun1.jpg" class="lazy" ><br>
		　　<noscript><img src="lun1.jpg" ></noscript>
	<img data-original="lun4.jpg" class="lazy" ><br>
		　　<noscript><img src="lun4.jpg" ></noscript>
	<img data-original="lun5.jpg" class="lazy" ><br>
		　　<noscript><img src="lun5.jpg" ></noscript>
	<img data-original="lun4.jpg" class="lazy" ><br>
		　　<noscript><img src="lun4.jpg" ></noscript>
	<img data-original="lun2.jpg" class="lazy" ><br>
		　　<noscript><img src="lun2.jpg" ></noscript>
	<img data-original="lun1.jpg" class="lazy" >
		　　<noscript><img src="lun1.jpg" ></noscript>
	<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
	<script src=‘jqueryLazyload.js‘></script>
<script type="text/javascript">
$(function() {
 　　$("img.lazy").show().lazyload({
 	　　　　effect:‘fadeIn‘
 　　});
});
</script>
 

jQuery lazyload 图片懒加载实现

标签：lan data code 点击特定元素距离 http click

原文地址：http://www.cnblogs.com/webwangjie/p/7193636.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行