1、场景:
一个网页如果包含了很多的图片,那么,服务器压力就会很大。不仅影响渲染速度还会浪费带宽。
通俗的说:你不看的图片我先不加载,也许你不看呢(哈哈),我何苦要做无效的事情呢 你想看时,我再加载(哈哈)
2、原理:
1)、先将img标签的src链接设为同一张图片(默认图片:可以是loading),把图片的实际地址赋给一个自定义属性。这时候所有的图片只发送一次请求。
2)、然后,当js监听到某张图片进入可视窗口时(说明你想看了),再将实际地址赋给src属性。src属性的值发生变化时,浏览器才会发送请求加载当前图片。如果图片没有进入可视区域,就不会加载图片(说明你还没想看呢),这样就大大的提高了效率。
3、示例代码
<!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>Document</title> <style> *{ margin: 0; padding: 0; } ul{ list-style: none; } li{ width: 100%; height: 200px; text-align: center; line-height: 200px } img{ display: block; height: 200px; } </style> </head> <body> <div id="box"> </div> </body> </html> <script> let imgDoms = document.getElementsByTagName("img"); // 当前显示图片的最大下标: let maxIndex = -1; window.onload = function(){ // 1、从后端获取到所有的图片地址,先赋值给图片标签的自定义属性(data-src),给图片的src赋值为loading getImgs(); // 2、加载可视区域的图片 loadingImg(); } window.onscroll = function(){ loadingImg(); } // 从后端获取到所有的图片地址,先赋值给图片标签的自定义属性(data-src),给图片的src赋值为loading function getImgs(){ //这个数组中的图片,可以是从后端获取到的,也可以写死。 let imgs = ["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg","img/6.jpg","img/7.jpg","img/8.jpg","img/9.jpg","img/10.jpg","img/11.jpg","img/12.jpg","img/13.jpg","img/14.jpg","img/15.jpg","img/16.jpg","img/17.jpg","img/18.jpg","img/19.jpg","img/20.jpg","img/21.jpg","img/22.jpg","img/23.jpg","img/24.jpg","img/25.jpg","img/26.jpg","img/27.jpg","img/28.jpg","img/29.jpg","img/30.jpg","img/31.jpg","img/32.jpg","img/33.jpg"]; let htmlStr = ""; for(let i=0;i<imgs.length;i++){ htmlStr+=`<img src="img/loading02.gif" data-src="${imgs[i]}" />`; } document.getElementById("box").innerHTML = htmlStr; } function loadingImg(){ // 1、计算当前滚动的高度+可视区域的高度(此处考虑的兼容性) let scrollTop = document.documentElement.scrollTop || document.body.scrollTop; let clientHeight = document.documentElement.clientHeight || document.body.clientHeight; let height = scrollTop+clientHeight; // 2、得到应该显示图片的序号(可视区域最下面的图片序号); let index = Math.ceil(height/200)-1; // 3、如果应该显示的图片的下标大于最大的下标,那就应该做图片的加载了。 if(index>maxIndex){ for(let i=maxIndex+1;i<=index;i++){ if(imgDoms[i].getAttribute("data-src")){ imgDoms[i].src = imgDoms[i].getAttribute("data-src"); imgDoms[i].removeAttribute("data-src"); } } } maxIndex = index; } </script>
标签:src,img,jpg,let,加载,图片 From: https://www.cnblogs.com/limou956259/p/17199189.html