图片懒加载实现-白红宇的个人博客

图片懒加载实现

发布日期：2021-09-06 22:32:34 浏览次数：4 分类：技术文章

本文共 3518 字，大约阅读时间需要 11 分钟。

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

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

jQuery lazyload.JS

　　jQuery lazyload.JS 地址：直接复制源码到本地

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

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

　　<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元素显示出来，再运行懒加载.

最后代码如下：

　　img {

　　width: 100%;

　　}

　　.lazy{display: none;}

</style>

$(function() {

　　$("img.lazy").show().lazyload({

　　　　effect:'fadeIn'

　　});

</script>

jq的懒加载大家看懂后，就可以尝试手动写懒加载效果：

其实懒加载的原理非常的简单：初次加载页面时只加载用户能看到的图片，而其他的图片等用户需要看时再加载。

首先将需要懒加载的图片先设置空的路径地址，并且设置display：none;让其隐藏；

　　.lazy{display：none}

这样在初次加载时由于路径为空，图片无法加载出来,并且因为图片被隐藏，所以也不会占用页面空间。

那么接下来就是实现懒加载的js部分了，这里有两种方式，可以根据需求灵活使用：

1、通过$(document).ready()方法，在页面加载完成后给图片添加路径，并取消隐藏：

　　$(document).ready(function(){

　　　　$('#lazy1').attr('src','/Template/xpshop_currents/Images/haohuiduo.jpg');

　　　　$('#lazy1').show();

　　})

2、通过监听鼠标页面滚动距离来加载图片

　　$(window).scroll(function(){

　　　　$('#lazy2').attr('src','/Template/xpshop_currents/Images/jiazhi.jpg');//鼠标滚动立即加载

　　　　if ($('#lazy2').offset().top - $(document).scrollTop()<1) {//鼠标滚动到合适的位置时将图片显示出来，可以设定自己想要的动画效果
　　　　　　$('#lazy2').fadeIn();
　　　　};
　　　　$('#lazy3').attr('src','/Template/xpshop_currents/Images/weibu.jpg');
　　　　if ($('#lazy3').offset().top - $(document).scrollTop()<1) {

　　　　　　$('#lazy3').fadeIn();
　　　　};
　　})

懒加载其实很简单，大家有没有看懂呢？

转载于:https://www.cnblogs.com/webwangjie/p/7193636.html

转载地址：https://blog.csdn.net/weixin_34273481/article/details/93316136 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！

上一篇：CSS笔记

下一篇：（1-2）配置的升级 - ASP.NET从MVC5升级到MVC6

发表评论

关于作者

喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！

-- 愿君每日到此一游！

发表评论

最新留言

关于作者

推荐文章