若是可使用谷歌，推荐查看延迟加载图像和视频javascript
使用JavaScript实现的思想：监听用户滚动的状态，若是用户滚动的可视区域中有须要显示的图片，就须要把对应图片的src写入到img标签中，浏览器会自动加载图片而且显示。css
<!-- 将图片的正确连接保存到data-src中 --> <img data-src="http://img.pconline.com.cn/images/upload/upc/tx/wallpaper/1301/05/c0/17135331_1357355776882.jpg" class="lazy-image" />
class lazyImage { constructor() { // 获取到页面中全部的img标签，而且将伪数组变为数组 this.imgs = Array.from(document.querySelectorAll('img')); this.imgsLength = this.imgs.length; // window.onscroll = this.debounce(this.onScrollEvent.bind(this), 200); window.addEventListener( 'scroll', // 回调函数的this指向全局，须要手动绑定构造函数中的this // this.onScrollEvent.call(this); // 能够写成节流/防抖函数，提升性能 this.debounce(this.onScrollEvent.bind(this), 200) ); // 页面一进入就须要查看可视范围内的图片 this.init(); } onScrollEvent() { // 须要监听鼠标滑过的高度 let imgs = this.imgs; let height = document.documentElement.clientHeight; imgs.forEach((item, index) => { if (item) { let imgShow = item.getBoundingClientRect(); if (imgShow.top < height) { let src = item.dataset.src; item.setAttribute('src', src); // 防止数组的塌陷问题 imgs[index] = null; } } else { this.imgsLength--; if (this.imgsLength == 0) { // 已经所有显示，须要remove滑动事件 document.removeEventListener('scroll', this.onScrollEvent); } } }); } init() { // 须要使用到IntersectionObserver，异步观察目标元素的方法，须要考虑到兼容性的问题 if ('IntersectionObserver' in window) { var intersectionObserver = new IntersectionObserver(function(entries) { entries.forEach((entry, index) => { if (entry.isIntersecting) { let lazyImage = entry.target; lazyImage.src = lazyImage.dataset.src; //中止对一个对象的关查 intersectionObserver.unobserve(lazyImage); } }); }); this.imgs.forEach(item => { intersectionObserver.observe(item); }); } else { this.onScrollEvent(); } } debounce(func, wait = 200) { let timeout; return function() { let context = this; let args = arguments; if (timeout) clearTimeout(timeout); timeout = setTimeout(() => { func.apply(context, args); }, wait); }; } } new lazyImage();
img上面有一个loading的属性，它可以指定浏览器如何加载图形html
eager当即加载图像，无论它是否在可视视口（visible viewport）以外（默认值）。java
lazy延迟加载图像，直到它和视口接近到一个计算获得的距离，由浏览器定义。web
使用方法：<img loading="lazy" src="" width="400" height="400" alt="">数组
若是须要本身测试的话，去找大量的图片也很差找，我这是在浏览网站的时候发现的一个demo,直接复制,而后在网络那里看请求的发送浏览器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>图片懒加载--使用img属性</title> <meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1" /> <script type="text/javascript"> document.documentElement.style.fontSize = (document.documentElement.clientWidth / 640) * 100 + 'px'; </script> <link rel="stylesheet" href="./style.css" /> </head> <body> <img loading="lazy" src="https://placekitten.com/400/400" width="400" height="400" alt="" /> <img loading="lazy" src="https://placekitten.com/401/401" width="401" height="401" alt="" /> <img loading="lazy" src="https://placekitten.com/402/402" width="402" height="402" alt="" /> <img loading="lazy" src="https://placekitten.com/403/403" width="403" height="403" alt="" /> <img loading="lazy" src="https://placekitten.com/404/404" width="404" height="404" alt="" /> <img loading="lazy" src="https://placekitten.com/405/405" width="405" height="405" alt="" /> <img loading="lazy" src="https://placekitten.com/406/406" width="406" height="406" alt="" /> <img loading="lazy" src="https://placekitten.com/407/407" width="407" height="407" alt="" /> <img loading="lazy" src="https://placekitten.com/408/408" width="408" height="408" alt="" /> <img loading="lazy" src="https://placekitten.com/409/409" width="409" height="409" alt="" /> <img loading="lazy" src="https://placekitten.com/410/410" width="410" height="410" alt="" /> <img loading="lazy" src="https://placekitten.com/411/411" width="411" height="411" alt="" /> <img loading="lazy" src="https://placekitten.com/412/412" width="412" height="412" alt="" /> <img loading="lazy" src="https://placekitten.com/413/413" width="413" height="413" alt="" /> <img loading="lazy" src="https://placekitten.com/414/414" width="414" height="414" alt="" /> <img loading="lazy" src="https://placekitten.com/415/415" width="415" height="415" alt="" /> <img loading="lazy" src="https://placekitten.com/416/416" width="416" height="416" alt="" /> <img loading="lazy" src="https://placekitten.com/417/417" width="417" height="417" alt="" /> <img loading="lazy" src="https://placekitten.com/418/418" width="418" height="418" alt="" /> <img loading="lazy" src="https://placekitten.com/419/419" width="419" height="419" alt="" /> <img loading="lazy" src="https://placekitten.com/420/420" width="420" height="420" alt="" /> <img loading="lazy" src="https://placekitten.com/421/421" width="421" height="421" alt="" /> <img loading="lazy" src="https://placekitten.com/422/422" width="422" height="422" alt="" /> <img loading="lazy" src="https://placekitten.com/423/423" width="423" height="423" alt="" /> <img loading="lazy" src="https://placekitten.com/424/424" width="424" height="424" alt="" /> <img loading="lazy" src="https://placekitten.com/425/425" width="425" height="425" alt="" /> <img loading="lazy" src="https://placekitten.com/426/426" width="426" height="426" alt="" /> <img loading="lazy" src="https://placekitten.com/427/427" width="427" height="427" alt="" /> <img loading="lazy" src="https://placekitten.com/428/428" width="428" height="428" alt="" /> <img loading="lazy" src="https://placekitten.com/429/429" width="429" height="429" alt="" /> <img loading="lazy" src="https://placekitten.com/430/430" width="430" height="430" alt="" /> <img loading="lazy" src="https://placekitten.com/431/431" width="431" height="431" alt="" /> <img loading="lazy" src="https://placekitten.com/432/432" width="432" height="432" alt="" /> <img loading="lazy" src="https://placekitten.com/433/433" width="433" height="433" alt="" /> <img loading="lazy" src="https://placekitten.com/434/434" width="434" height="434" alt="" /> <img loading="lazy" src="https://placekitten.com/435/435" width="435" height="435" alt="" /> <img loading="lazy" src="https://placekitten.com/436/436" width="436" height="436" alt="" /> <img loading="lazy" src="https://placekitten.com/437/437" width="437" height="437" alt="" /> <img loading="lazy" src="https://placekitten.com/438/438" width="438" height="438" alt="" /> <img loading="lazy" src="https://placekitten.com/439/439" width="439" height="439" alt="" /> <img loading="lazy" src="https://placekitten.com/440/440" width="440" height="440" alt="" /> <img loading="lazy" src="https://placekitten.com/441/441" width="441" height="441" alt="" /> <img loading="lazy" src="https://placekitten.com/442/442" width="442" height="442" alt="" /> <img loading="lazy" src="https://placekitten.com/443/443" width="443" height="443" alt="" /> <img loading="lazy" src="https://placekitten.com/444/444" width="444" height="444" alt="" /> <img loading="lazy" src="https://placekitten.com/445/445" width="445" height="445" alt="" /> <img loading="lazy" src="https://placekitten.com/446/446" width="446" height="446" alt="" /> <img loading="lazy" src="https://placekitten.com/447/447" width="447" height="447" alt="" /> <img loading="lazy" src="https://placekitten.com/448/448" width="448" height="448" alt="" /> <img loading="lazy" src="https://placekitten.com/449/449" width="449" height="449" alt="" /> <img loading="lazy" src="https://placekitten.com/450/450" width="450" height="450" alt="" /> <img loading="lazy" src="https://placekitten.com/451/451" width="451" height="451" alt="" /> <img loading="lazy" src="https://placekitten.com/452/452" width="452" height="452" alt="" /> <img loading="lazy" src="https://placekitten.com/453/453" width="453" height="453" alt="" /> <img loading="lazy" src="https://placekitten.com/454/454" width="454" height="454" alt="" /> <img loading="lazy" src="https://placekitten.com/455/455" width="455" height="455" alt="" /> <img loading="lazy" src="https://placekitten.com/456/456" width="456" height="456" alt="" /> <img loading="lazy" src="https://placekitten.com/457/457" width="457" height="457" alt="" /> <img loading="lazy" src="https://placekitten.com/458/458" width="458" height="458" alt="" /> <img loading="lazy" src="https://placekitten.com/459/459" width="459" height="459" alt="" /> <img loading="lazy" src="https://placekitten.com/460/460" width="460" height="460" alt="" /> <img loading="lazy" src="https://placekitten.com/461/461" width="461" height="461" alt="" /> <img loading="lazy" src="https://placekitten.com/462/462" width="462" height="462" alt="" /> <img loading="lazy" src="https://placekitten.com/463/463" width="463" height="463" alt="" /> <img loading="lazy" src="https://placekitten.com/464/464" width="464" height="464" alt="" /> <img loading="lazy" src="https://placekitten.com/465/465" width="465" height="465" alt="" /> <img loading="lazy" src="https://placekitten.com/466/466" width="466" height="466" alt="" /> <img loading="lazy" src="https://placekitten.com/467/467" width="467" height="467" alt="" /> <img loading="lazy" src="https://placekitten.com/468/468" width="468" height="468" alt="" /> <img loading="lazy" src="https://placekitten.com/469/469" width="469" height="469" alt="" /> <img loading="lazy" src="https://placekitten.com/470/470" width="470" height="470" alt="" /> <img loading="lazy" src="https://placekitten.com/471/471" width="471" height="471" alt="" /> <img loading="lazy" src="https://placekitten.com/472/472" width="472" height="472" alt="" /> <img loading="lazy" src="https://placekitten.com/473/473" width="473" height="473" alt="" /> <img loading="lazy" src="https://placekitten.com/474/474" width="474" height="474" alt="" /> <img loading="lazy" src="https://placekitten.com/475/475" width="475" height="475" alt="" /> <img loading="lazy" src="https://placekitten.com/476/476" width="476" height="476" alt="" /> <img loading="lazy" src="https://placekitten.com/477/477" width="477" height="477" alt="" /> <img loading="lazy" src="https://placekitten.com/478/478" width="478" height="478" alt="" /> <img loading="lazy" src="https://placekitten.com/479/479" width="479" height="479" alt="" /> <img loading="lazy" src="https://placekitten.com/480/480" width="480" height="480" alt="" /> <img loading="lazy" src="https://placekitten.com/481/481" width="481" height="481" alt="" /> <img loading="lazy" src="https://placekitten.com/482/482" width="482" height="482" alt="" /> <img loading="lazy" src="https://placekitten.com/483/483" width="483" height="483" alt="" /> <img loading="lazy" src="https://placekitten.com/484/484" width="484" height="484" alt="" /> <img loading="lazy" src="https://placekitten.com/485/485" width="485" height="485" alt="" /> <img loading="lazy" src="https://placekitten.com/486/486" width="486" height="486" alt="" /> <img loading="lazy" src="https://placekitten.com/487/487" width="487" height="487" alt="" /> <img loading="lazy" src="https://placekitten.com/488/488" width="488" height="488" alt="" /> <img loading="lazy" src="https://placekitten.com/489/489" width="489" height="489" alt="" /> <img loading="lazy" src="https://placekitten.com/490/490" width="490" height="490" alt="" /> <img loading="lazy" src="https://placekitten.com/491/491" width="491" height="491" alt="" /> <img loading="lazy" src="https://placekitten.com/492/492" width="492" height="492" alt="" /> <img loading="lazy" src="https://placekitten.com/493/493" width="493" height="493" alt="" /> <img loading="lazy" src="https://placekitten.com/494/494" width="494" height="494" alt="" /> <img loading="lazy" src="https://placekitten.com/495/495" width="495" height="495" alt="" /> <img loading="lazy" src="https://placekitten.com/496/496" width="496" height="496" alt="" /> <img loading="lazy" src="https://placekitten.com/497/497" width="497" height="497" alt="" /> <img loading="lazy" src="https://placekitten.com/498/498" width="498" height="498" alt="" /> <img loading="lazy" src="https://placekitten.com/499/499" width="499" height="499" alt="" /> </body> </html>