当前位置：首页 > 编程资源 > 编程问答 >内容正文

编程问答

图片的赖加载(lazyLoad)

发布时间：2025/5/22 编程问答 36 豆豆

生活随笔收集整理的这篇文章主要介绍了图片的赖加载(lazyLoad) 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

懒加载的意义（在线demo预览）

尽管很多公司的网页都有一些限制，比如页面的最大的图片大小不得大于50k,也有很多图片优化工具fis3、gulp等等，但是如果图片太多还是会影响页面的加载速度，快则几十秒慢则几十分钟，这样会导致用户流失。

图片的加载对页面的加载速度有很大影响！！所以，对于图片过多的页面，为了加速页面加载速度，所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载，等到滚动到可视区域后再去加载。这样子对于页面加载性能上会有很大的提升，也提高了用户体验，即图片赖加载~

原理

将页面中的img标签src指向一张小图片或者src为空，然后定义data-src（这个属性可以自定义命名，我才用data-src）属性指向真实的图片。

当载入页面时，先把可视区域内的img标签的data-src属性值负给src，然后监听滚动事件，把用户即将看到的图片加载。这样便实现了懒加载。

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>图片赖加载</title><meta name="renderer" content="webkit"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black"><meta name="format-detection" content="telephone=no"><meta http-equiv="Expires" content="-1"><meta http-equiv="Cache-Control" content="no-cache"><meta http-equiv="Pragma" content="no-cache"><meta name="applicable-device" content="mobile"><meta content="" name="keywords"><meta name="description" content=""><link rel="stylesheet" href="css/img_lazy.css"> </head> <body><div class="main"><img src="" data-src="images/1.jpg" alt=""><img src="" data-src="images/2.jpg" alt=""><img src="" data-src="images/3.jpg" alt=""><img src="" data-src="images/4.jpg" alt=""><img src="" data-src="images/5.jpg" alt=""><img src="" data-src="images/6.jpg" alt=""><img src="" data-src="images/7.jpg" alt=""><img src="" data-src="images/8.jpg" alt=""></div> <script src="js/imgLazyLoad.js"></script> </body> </html> *{margin: 0;padding: 0;box-sizing: border-box;list-style: none;border: 0;outline: 0; } .main{max-width: 640px;width: 100%;margin: 0 auto; } img{display: block;width: 100%;height: 640px; } /*** Created by Administrator on 2016/11/28.*/ !function(){var imgs = document.getElementsByTagName("img");var num = imgs.length;var n = 0; //存储图片加载到的位置，避免每次都从第一张图片开始遍历lazyload(); //页面载入完毕加载可是区域内的图片window.onscroll = lazyload;function lazyload() { //监听页面滚动事件var seeHeight = document.documentElement.clientHeight; //可见区域高度var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //滚动条距离顶部高度for (var i = n; i < num; i++) {if (imgs[i].offsetTop < seeHeight + scrollTop) {if (imgs[i].getAttribute("src") == "") {imgs[i].src = imgs[i].getAttribute("data-src");}n = i + 1;}}} }();

转载于:https://www.cnblogs.com/-walker/p/6108866.html

总结

以上是生活随笔为你收集整理的图片的赖加载(lazyLoad)的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。