js实现了第一屏的延迟加载 js实现了多屏单画面的延时加载效果

本文分享了js实现延迟加载的思想，以及延迟加载的具体代码在第一屏供大家参考。具体内容如下

函数：保证了页面打开的速度(如果3s内无法打开主页，则已经是死页)

原则：

1)对于第一屏内容中的图片：先给对应区域一个默认图片占用的位置(默认图片需要很小，一般可以维持在5kb以内)。加载完第一个屏幕内容后(或者可以给一个延迟时间)，我开始加载真实的图片。

2)对于其他屏幕的图片：也是默认的图片占用。当滚动条滚动到相应区域时，我们将再次开始加载真实图片

扩展：异步加载数据。开始时，只加载绑定前两个屏幕的数据，不处理后面的数据。当页面滚动到相应的区域时，会重新请求数据绑定来呈现数据。

详情请看下图

第一屏延迟加载代码如下：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title document/title style * { padd :0；margin:0font-size :14 px；} # banner { margin:10px auto宽度width:300px高度：150 px；border:1px纯绿色；background : URL(' img/default . gif ')无重复居中；/*向当前区域添加默认图片占位符，以告知用户此处的图片正在加载*/} # banner img { display : none；/*最开始的时候，IMG的SRC属性没有地址，所以IE浏览器中会显示一张残破的图片，不美观，所以我们默认让其隐藏，加载真实图片时显示*/width :100；高度：100%；} /style/headbody div id='banner '！- trueImg是当前标记的自定义属性，它存储真实图片的地址-img src=' http : ' alt=' true img=' img/JD . jpg '/div script var banner=document . getelementbyid(' banner ')。imgFir=banner . getelementsbytagname(' img ')[0]window . settimeout(function(){//imgFir . src=imgFir . getattribute(' true img ')；//imgfir . style . display=' block '/以上处理仍未完成：如果我们获取的实拍图片地址有误，在分配给img的SRC属性时，不仅控制台会报错，页面上还会出现一张残破的图片。//获取图片的地址，验证地址的有效性，然后分配。如果无效，将不会进行处理。//varoimg=document . create element(' img ')varoimg=new image；//创建一个临时的IMG标记oimg . src=imgfir . getattribute(' true img ')；OImg.onload=function(){//当图片可以正常加载时，imgfir . src=this . src；imgfir . style . display=' block '；OImg=null console.log('加载完成')} console.log('加载正在进行中.)}，500)/脚本/正文/html延迟加载多屏单画面

具体代码如下：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title document/title style * { padd :0；margin:0font-size :14 px；} # banner { margin:10px auto宽度width:300px高度：150 px；border:1px纯绿色；background : URL(' img/default . gif ')无重复居中；/*向当前区域添加默认图片占位符，以告知用户此处的图片正在加载*/} # banner img { display : none；/*最开始的时候，IMG的SRC属性没有地址，所以IE浏览器中会显示一张残破的图片，不美观，所以我们默认让其隐藏，加载真实图片时显示*/width :100；高度：100%；} /style/headbody div id='banner '！- trueImg是当前标记的自定义属性，它存储真实图片的地址-img src=' http : ' alt=' true img=' img/JD . jpg '/div script var banner=document . getelementbyid(' banner ')。imgFir=banner . getelementsbytagname(' img ')[0]window . on croll=function(){ if(banner . isload){ return；} var A=banner . offset ThEight utils . offset(banner)。顶部；var B=utils . win(' client height ')utils . win(' scroll top ')；If(AB){ //当条件成立时，我们加载真实图片。第一次加载完成后，我们总是在滚动页面的过程中按住AB，重新执行下面的操作，导致图片在一个容器中重复加载。var oImg=新图像；oimg . src=IMgfir . GetAttribute(' TrueIMg ')；oimg . onload=function(){ IMgfir . src=this . src；imgfir . style . display=' block '；oImg=null} banner.isLoad=true//设置一个自定义属性，告诉浏览器我已经加载完图片了(不管是否正常加载，都不需要处理一次)}} /script/body/html

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。