JS实现图片懒加载
2021-08-11 10:58
阅读：612
标签：top 请求 关键点 display strong details 步骤 浏览器 offset 为什么需要用到懒加载？ 现在人们都会浏览网页，在网页上会有很多图片，例如京东、淘宝等电商网站，图片非常多，那么在浏览时，服务器的压力会很大，不仅影响了渲染页面的速度，还浪费宽带，给我们带来了浏览的不便利。 懒加载原理 一张图片就是一个标签，浏览器是否发起请求图片是根据的src属性，所以实现懒加载的关键就是，在图片没有进入可视区域时，先不给的src赋值，这样浏览器就不会发送请求了，等到图片进入可视区域再给src赋值。 思路与步骤1.加载loading图片2.判断哪些图片是需要加载（关键点）3.隐形加载图片4.替换真图片 具体实现js代码如下： 懒加载 img{ height: 800px; display:block; } var img=document.querySelectorAll("img") var arr=[]//保存所有图片的offsetTop var current=0//保存当前滚动到的图片的序号 for(var i=0;i
上一篇：包机制、JavaDoc
下一篇：C#的几种强转的整理
评论
亲，登录后才可以留言！