图片懒加载 偏执的太偏执、 2022-05-28 02:07 565阅读 0赞 在实际的项目开发中,我们通常会遇见这样的场景:一个页面有很多图片,而首屏出现的图片大概就一两张,那么我们还要一次性把所有图片都加载出来吗?显然这是愚蠢的,不仅影响页面渲染速度,还浪费带宽。这也就是们通常所说的首屏加载,技术上现实其中要用的技术就是图片懒加载--到可视区域再加载。 ## 思路: ## 将页面里所有img属性src属性用data-xx代替,当页面滚动直至此图片出现在可视区域时,用js取到该图片的data-xx的值赋给src。 ## 关于各种宽高: ## ![复制代码][copycode.gif] 页可见区域宽: document.body.clientWidth; 网页可见区域高: document.body.clientHeight; 网页可见区域宽: document.body.offsetWidth (包括边线的宽); 网页可见区域高: document.body.offsetHeight (包括边线的宽); 网页正文全文宽: document.body.scrollWidth; 网页正文全文高: document.body.scrollHeight; 网页被卷去的高: document.body.scrollTop; 网页被卷去的左: document.body.scrollLeft; 网页正文部分上: window.screenTop; 网页正文部分左: window.screenLeft; 屏幕分辨率的高: window.screen.height; 屏幕分辨率的宽: window.screen.width; 屏幕可用工作区高度: window.screen.availHeight; ![复制代码][copycode.gif] ## 示例: ## ### jqueryLazyload方式 ### 下载地址:[https://github.com/helijun/helijun/blob/master/plugin/lazyLoad/jquery.lazyload.js][https_github.com_helijun_helijun_blob_master_plugin_lazyLoad_jquery.lazyload.js] <section class="module-section" id="container"> <img class="lazy-load" data-original="../static/img/loveLetter/teacher/teacher1.jpg" width="640" height="480" alt="测试懒加载图片"/> </section> ![复制代码][copycode.gif] require.config({ baseUrl : "/static", paths: { jquery:'component/jquery/jquery-3.1.0.min' jqueryLazyload: 'component/lazyLoad/jquery.lazyload',//图片懒加载 }, shim: { jqueryLazyload: { deps: ['jquery'], exports: '$' } } }); ![复制代码][copycode.gif] ![复制代码][copycode.gif] require( [ 'jquery', 'jqueryLazyload' ], function($){ $(document).ready(function() { $("img.lazy-load").lazyload({ effect : "fadeIn", //渐现,show(直接显示),fadeIn(淡入),slideDown(下拉) threshold : 180, //预加载,在图片距离屏幕180px时提前载入 event: 'click', // 事件触发时才加载,click(点击),mouseover(鼠标划过),sporty(运动的),默认为scroll(滑动) container: $("#container"), // 指定对某容器中的图片实现效果 failure_limit:2 //加载2张可见区域外的图片,lazyload默认在找到第一张不在可见区域里的图片时则不再继续加载,但当HTML容器混乱的时候可能出现可见区域内图片并没加载出来的情况 }); }); }); ![复制代码][copycode.gif] 为了代码可读性,属性值我都写好了注释。值得注意的是预制图片属性为data-original,并且最好是给予初始高宽占位,以免影响布局,当然这里为了演示我是写死的640x480,如果是响应式页面,高宽需要动态计算。 dome演示地址:[http://h5.sztoda.cn/test/testLazyLoad][http_h5.sztoda.cn_test_testLazyLoad] ### echo.js方式 ### 在前面“前端知识的一些总结”的博文中,介绍了一款非常简单实用轻量级的图片延时加载插件echo.js,如果你的项目中没有依赖jquery,那么这将是个不错的选择,50行代码,压缩后才1k。当然你完全可以集成到自己项目中去! 下载地址:[https://github.com/helijun/helijun/tree/master/plugin/echo][https_github.com_helijun_helijun_tree_master_plugin_echo] ![复制代码][copycode.gif] <style> .demo img { width: 736px; height: 490px; background: url(images/loading.gif) 50% no-repeat;} </style> ![复制代码][copycode.gif] <div class="demo"> <img class="lazy" src="images/blank.gif" data-echo="images/big-1.jpg"> </div> ![复制代码][copycode.gif] <script src="js/echo.min.js"></script> <script> Echo.init({ offset: 0,//离可视区域多少像素的图片可以被加载 throttle: 0 //图片延时多少毫秒加载 }); </script> ![复制代码][copycode.gif] 说明:blank.gif是一张背景图片,包含在插件里了。图片的宽高必须设定,当然,可以使用外部样式对多张图片统一控制大小。data-echo指向的是真正的图片地址。 示例: ### 完整代码 ### <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport" /> <title>图片懒加载</title> </head> <style> *{margin: 0;padding: 0;} img{width: 48%;height: 150px;display: inline;border: 1px solid #ccc;} </style> <body> <div id="div"> <div id="one"> <img class="img" data-url="img/1.jpg" src="img/2.png" alt=""> <img class="img" data-url="img/2.jpg" src="img/2.png" alt=""> <img class="img" data-url="img/3.jpg" src="img/2.png" alt=""> <img class="img" data-url="img/4.jpg" src="img/2.png" alt=""> <img class="img" data-url="img/5.jpg" src="img/2.png" alt=""> <img class="img" data-url="img/1.jpg" src="img/2.png" alt=""> <img class="img" data-url="img/1.jpg" src="img/2.png" alt=""> <img class="img" data-url="img/1.jpg" src="img/2.png" alt=""> <img class="img" data-url="img/1.jpg" src="img/2.png" alt=""> <img class="img" data-url="img/1.jpg" src="img/2.png" alt=""> </div> <div id="two"> <img class="img" data-url="img/6.jpg" src="img/2.png" alt=""> <img class="img" data-url="img/7.jpg" src="img/2.png" alt=""> <img class="img" data-url="img/8.jpg" src="img/2.png" alt=""> <img class="img" data-url="img/2.jpg" src="img/2.png" alt=""> </div> </div> <script> //首次进入触发判断 getList(); function getList(){ //第一次显示的图片列表高度 var contentHeight = document.getElementById('one').offsetHeight; //设备可用高度 var availHeight = window.screen.availHeight; //如果不滚动two直接被显示出来 if (contentHeight<availHeight){ //遍历#one下的img,然后替换路径 for(var x = 0;x < document.querySelectorAll('#one .img').length;x++){ var imgUrl = document.querySelectorAll('#one .img')[x].getAttribute('data-url'); var img = new Image(); img.src = imgUrl; img.onload = (function(e){ document.querySelectorAll('#one .img')[x].src = document.querySelectorAll('#one .img')[x].getAttribute('data-url'); })(); } //遍历#two,然后替换路径 for(var x = 0;x < document.querySelectorAll('#two .img').length;x++){ var imgUrl = document.querySelectorAll('#two .img')[x].getAttribute('data-url'); var img = new Image(); img.src = imgUrl; img.onload = (function(e){ document.querySelectorAll('#two .img')[x].src = document.querySelectorAll('#two .img')[x].getAttribute('data-url'); })(); } }else { //遍历#one下的img,然后替换路径 for(var x = 0;x < document.querySelectorAll('#one .img').length;x++){ var imgUrl = document.querySelectorAll('#one .img')[x].getAttribute('data-url'); var img = new Image(); img.src = imgUrl; img.onload = (function(e){ document.querySelectorAll('#one .img')[x].src = document.querySelectorAll('#one .img')[x].getAttribute('data-url'); })(); } } } //#two显示的次数 0是第一次显示 var twoShowTime = 0; //滚动事件 window.onscroll = function(){ if (twoShowTime == 0){ scroll(); } }; //滚动判断图片是否加载 function scroll() { //#content的高度 var contentHeight = document.getElementById('one').offsetHeight; //设备可用高度 var availHeight = window.screen.availHeight; //滚动的高度 var scrollHeight = document.body.scrollTop; //判断如果显示出来了#two if (scrollHeight > contentHeight - availHeight) { //遍历#two下的img,然后替换路径 for (var x = 0; x < document.querySelectorAll('#two .img').length; x++) { var imgUrl = document.querySelectorAll('#two .img')[x].getAttribute('data-url'); var img = new Image(); img.src = imgUrl; img.onload = (function () { document.querySelectorAll('#two .img')[x].src = document.querySelectorAll('#two .img')[x].getAttribute('data-url'); })(); } twoShowTime = 1; } } </script> </body> </html> ### 使用jQuery实现图片懒加载原理 ### ![l][] 在网页中,常常需要用到图片,而图片需要消耗较大的流量。正常情况下,浏览器会解析整个HTML代码,然后从上到下依次加载`<img src="xxx">`的图片标签。如果页面很长,隐藏在页面下方的图片其实已经被浏览器加载了。如果用户不向下滚动页面,就没有看到这些图片,相当于白白浪费了图片的流量。 所以,淘宝、京东这些流量非常巨大的电商,商品介绍页又必须有大量的图片,因此,这些页面的图片都是“按需加载”,即用户滚动页面时显示出来的时候才加载图片。当网速非常快的时候,用户并不能感知懒加载的动作,既省流量又不影响用户浏览。 本文给出一种利用jQuery实现图片懒加载的原理。它的基本思想是:在输出HTML的时候,不要直接输出`<img src="xxx"`,而是输出如下的`img`标签: <img src="/static/loading.gif" data-src="http://真正的图片地址/xxx.jpg"> 因此,页面显示的图片是一个gif加载动画。当页面滚动时,如果图片出现在屏幕中,就利用jQuery把`<img>`的`src`属性替换为`data-src`的内容,浏览器就会实时加载。 JavaScript代码如下: // 注意: 需要引入jQuery和underscore $(function() { // 获取window的引用: var $window = $(window); // 获取包含data-src属性的img,并以jQuery对象存入数组: var lazyImgs = _.map($('img[data-src]').get(), function (i) { return $(i); }); // 定义事件函数: var onScroll = function() { // 获取页面滚动的高度: var wtop = $window.scrollTop(); // 判断是否还有未加载的img: if (lazyImgs.length > 0) { // 获取可视区域高度: var wheight = $window.height(); // 存放待删除的索引: var loadedIndex = []; // 循环处理数组的每个img元素: _.each(lazyImgs, function ($i, index) { // 判断是否在可视范围内: if ($i.offset().top - wtop < wheight) { // 设置src属性: $i.attr('src', $i.attr('data-src')); // 添加到待删除数组: loadedIndex.unshift(index); } }); // 删除已处理的对象: _.each(loadedIndex, function (index) { lazyImgs.splice(index, 1); }); } }; // 绑定事件: $window.scroll(onScroll); // 手动触发一次: onScroll(); `onScroll()`函数最后要手动触发一次,因为页面显示时,并未触发scroll事件。如果图片已经在可视区域内,这些图片仍然是loading状态,需要手动触发一次,就可以正常显示。 要测试图片懒加载效果,可以在Chrome浏览器的控制台选择“Network”,把“Online”改为“Slow 3G”就可以模拟慢速网络下浏览器懒加载图片的效果: ![lazy-loading-test][] [copycode.gif]: /images/20220528/76decf62ba934469af47346e9b39fa18.png [https_github.com_helijun_helijun_blob_master_plugin_lazyLoad_jquery.lazyload.js]: https://github.com/helijun/helijun/blob/master/plugin/lazyLoad/jquery.lazyload.js [http_h5.sztoda.cn_test_testLazyLoad]: http://h5.sztoda.cn/test/testLazyLoad [https_github.com_helijun_helijun_tree_master_plugin_echo]: https://github.com/helijun/helijun/tree/master/plugin/echo [l]: https://cdn.liaoxuefeng.com/cdn/files/attachments/00151045553344099d9368ac6604e81ac1c4ab8bbc70ad3000/l [lazy-loading-test]: https://cdn.liaoxuefeng.com/cdn/files/attachments/001510456055178607ca6e299fa4f0ea776d89d48f2c564000/l
相关 图片懒加载 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Nvbmds 青旅半醒/ 2022年11月16日 13:41/ 0 赞/ 339 阅读
相关 图片懒加载 function lazyLoadImg() { var img = document.getElementsByTagName('img'); s 谁践踏了优雅/ 2022年09月28日 13:05/ 0 赞/ 401 阅读
相关 图片懒加载 在一个项目中,如果同时加载的图片太多的话,会导致页面卡顿,这个时候就会用到懒加载。懒加载的实现原理是监听浏览器的滚动条事件,先加载出前面几张图片,然后当滚动条滚动的时候再依次加 分手后的思念是犯贱/ 2022年06月17日 13:49/ 0 赞/ 193 阅读
相关 图片懒加载 1.引入js jquery.lazyload.js(如下) / Lazy Load - jQuery plugin for lazy loading 缺乏、安全感/ 2022年06月16日 06:44/ 0 赞/ 504 阅读
相关 图片懒加载 懒加载的意义[(在线demo预览)][demo] 尽管很多公司的网页都有一些限制,比如页面的最大的图片大小不得大于50k,也有很多图片优化工具fis3、gulp等等,但是 痛定思痛。/ 2022年06月04日 07:58/ 0 赞/ 551 阅读
相关 图片懒加载 在实际的项目开发中,我们通常会遇见这样的场景:一个页面有很多图片,而首屏出现的图片大概就一两张,那么我们还要一次性把所有图片都加载出来吗?显然这是愚蠢的,不仅影响页面渲染速度, 偏执的太偏执、/ 2022年05月28日 02:07/ 0 赞/ 566 阅读
相关 图片懒加载 <!--<!doctype html>--> <!--<html lang="en">--> <!--<head>--> <!--<me 亦凉/ 2022年05月23日 12:19/ 0 赞/ 504 阅读
相关 图片懒加载 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> r囧r小猫/ 2022年05月21日 06:54/ 0 赞/ 545 阅读
相关 图片懒加载 \[外链图片转存失败(img-vbwUXXxJ-1563574134995)([https://upload-images.jianshu.io/upload\_images/ 川长思鸟来/ 2021年09月30日 00:24/ 0 赞/ 866 阅读
还没有评论,来说两句吧...