当前位置:主页 > 36365线路检测中心 >
 
36365线路检测中心
Js懒加载

时间:2019/05/25    点击量:

Js懒加载
当您打开页面时,浏览器会从上到下读取img src标记中的地址并打开并读取该主题。
如果用户的网络速度不是很快,或者此页面上的图像太多,则图像将无法正确显示,因为每个图像都会加载但不会加载。
一方面,用户体验非常糟糕。谁会耐心等待页面加载?
另一方面,加载每个映像会向服务器发送一个请求,这会增加服务器的负载。
在这些情况下,您应该使用慢负载技术。首先只加载显示窗口区域中的图像,然后在用户向下拖动滚动条时继续加载下一个图像。当前显示的窗口
1
这减少了加载时的线程数,允许您快速加载可见区域中的图像,并优化用户体验。
2
同时,减少了发送到服务器的请求数量,并显着降低了服务器上的负载。
所以你怎么收费很晚?
我使用的方法:当我写一个页面img标签时,我没有在src属性中放置一个图像路径。
而是自定义另一个属性,例如_src。
输入此自定义属性的路径。
然后,当您加载页面时,您无法首先加载此图像。
当导航器的显示区域移动到此图像时,_src中的路径将分配给src属性并开始加载。
代码如下:
functiongetFixed(obj){//获取行属性no functiongetStyle(obj,styleName){if(obj。
currentStyle){return obj。
currentStyle[styleName];}else{returngetComputedStyle(obj,null)[styleName];}}//获取图像与页面顶部的距离,但图像的主变量为variLeft = 0。variTop = 0; varoParent = objwhile(oParent){if(oParent)
tagName ==“HTML”){break;}iLeft + = oParent。
offsetLeft; iTop + = oParent
offsetTop; if(oParent!
= obj){iLeft + = parseInt(getStyle(oParent,“borderWidth”)); // offsetLeft不包含边框,因此iTop + = parseInt(getStyle(oParent,“borderWidth”);}oParent = oParent a border这种加入。
offsetParent;}return[iLeft,iTop]; //如果break isop是图像距页面顶部的距离}。
Onload =窗口
在scroll = function(){
varaImg =文件
getElementsByTagName(“img”);
varbodyScrollTop = document

scrollTop || Documents
documentElement。
scrollTop; varscrollBottom = bodyScrollTop + document
documentElement。
clientHeight;(vari = 0; iaImg。
长度i ++){if(getFixed(aImg[i])[1]= scrollBottom){//这表示图像已经在显示区域并开始加载aImg[i]。
Src = aImg[i]。
getAttribute(“_ src”);}}}