0126.课件15&图片延迟加载 · 原生js-2018

36. 图片延迟加载怎么实现 ~~~ <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>珠峰培训</title> <link rel="stylesheet" href="reset.min.css"> <style> .imgBox { margin: 20px auto; width: 1000px; height: 300px; /*设置一张默认的占位背景图:图片没有显示之前，显示的是默认图*/ background: url("img/default.gif") no-repeat center center #EEE; } .imgBox img { display: none;/*开始的时候由于图片没有加载，我们让其先隐藏，当真实图片加载完成的时候我们在让其显示即可（某些浏览器在图片SRC为空或者加载的图片不存在的时候，不是不显示，而是显示一个×，不好看）*/ width: 100%; height: 100%; } </style> </head> <body> <div class="imgBox" id="imgBox">  <img src="" data-src="img/banner1000.jpg" alt=""> </div> <script src="js/jquery-1.11.3.min.js"></script> <script src="js/8.js"></script> </body> </html> ~~~ ~~~ /* * 图片延迟加载（图片懒加载） * 前端性能优化的重要手段之一，开始加载页面的时候，并没有加载真实的图片， * 当页面结构和数据都呈现完成后，在加载真实的图片 * * 1.在结构上，我们把IMG图片放到一个DIV盒子中， * 开始的时候图片的SRC(SRC中有地址就按照地址加载图片)为空， * 我们把图片的地址存放到自定义属性DATA-SRC中（此位置不展示真实的图片）， * 我们给图片所在的盒子设置一个默认的背景图片占位(要求这张图片越小越好 1KB) * 2.在JS中，当监听到页面中的结构和数据都加载完成后（或者设置一个间隔时间）， * 开始把DATA-SRC自定义属性中存储的真实图片地址赋值给IMG的SRC属性（ * 浏览器此时开始加载真实的图片 =>为了防止图片地址不存在导致的404错误， * 我们在赋值给图片的SRC属性时，往往都会验证一下图片是否存在） */ //=>当页面加载完成（结构、数据、DOM等都加载完成） // window.onload=function(){} //=>也可以设置一个定时器，间隔多长时间后在加载真实图片 // （定时器是异步的，所以定时器能执行，也代表页面加载完成） // setTimeout(function(){},100); var imgBox = document.getElementById('imgBox'), pageImg = imgBox.getElementsByTagName('img')[0]; setTimeout(function () { //=>加载真实图片 var trueImg = pageImg.getAttribute('data-src'); //=>创建一个临时的IMG来验证 // var tempImg = document.createElement('img'); var tempImg = new Image(); tempImg.onload = function () { //=>图片加载成功触发这个事件 pageImg.src = trueImg; pageImg.style.display = 'block'; tempImg = null; }; tempImg.src = trueImg; //=>在部分IE浏览器中只有把SRC赋值放到ONLOAD下面才能起到作用 //=>这样做不好：如果图片不存在，在部分浏览器中，页面中的IMG部分显示的是一个叉叉， // 不好看（我们最好在赋值给页面的SRC属性的时候，先验证一下图片是否存在，存在我们在赋值） // pageImg.src = trueImg; // pageImg.style.display = 'block'; }, 1000); ~~~ ~~~ <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>珠峰培训</title> <link rel="stylesheet" href="reset.min.css"> <style> .container { margin: 20px auto; width: 1000px; } .container .imgBox { margin-bottom: 20px; height: 300px; background: url("img/default.gif") no-repeat center center #EEE; } .container .imgBox img { display: none; width: 100%; height: 100%; } </style> </head> <body> <div class="container">  </div> <script src="js/jquery-1.11.3.min.js"></script> <script src="js/9.js"></script> </body> </html> ~~~ 8.js ~~~ $(function () { let $container = $('.container'), $imgList = null; //1.先绑定数据 ~function () { let str = ``; for (let i = 0; i < 100; i++) { let ran = Math.round(Math.random() * 3 + 1); str += `<div class="imgBox"> <img src="" alt="" data-src="img/banner${ran}.jpg"> </div>`; } $container.html(str); $imgList = $container.find('img'); }(); //2.加载真实的图片 //=>lazyImg:单张图片延迟加载(传递给我谁,我就加载谁) let lazyImg = curImg => { let $curImg = $(curImg), trueImg = $curImg.attr('data-src'); let tempImg = new Image(); tempImg.onload = () => { // $curImg.attr('src', trueImg).css({ // display: 'block' // }); $curImg.attr('src', trueImg) .stop().fadeIn(300);//=>结束当前正在运行的动画,执行FADE-IN,让图片300MS内渐现出来(JQ中提供的动画方法) tempImg = null; curImg.isLoad = true; //=>图片加载成功后，设置一个自定义属性存储当前图片已经加载了，后期不需要重复的加载 }; tempImg.src = trueImg; }; //=>computedImg:计算哪张图片可以加载了 let computedImg = () => { //=>观察所有图片中谁能加载了，就执行LAZY-IMG让其加载即可 $imgList.each((index, curImg) => { //=>A:当前图片所在盒子的底边距离BODY偏移 //=>B:当前浏览器底边距离BODY偏移 let $curImg = $(curImg), $imgBox = $curImg.parent(), A = $imgBox.offset().top + $imgBox.outerHeight(), B = document.documentElement.scrollTop + document.documentElement.clientHeight; if (A <= B) { //=>代表图片所在盒子呈现在视野中，开始加载真实的图片 if (curImg.isLoad) { //=>当前图片如果已经加载过了，不在重复的加载 return; } lazyImg(curImg); } }); }; $(window).on('load scroll', computedImg); //=>LOAD和SCROLL的时候做相同的事情（JQ中的事件绑定特点） }); ~~~