-
角色：确保页面打开的速度（如果没有打开主页，它已经是一个死亡页面）。
原理：
1），图中第一页的内容：第一个对应一个默认的图像位置的区域（默认图表是非常小的，一般可以保持在5KB），当第一屏内容加载（或能延迟时间），我在真正开始加载图片
2）对于屏幕中的其他图像，它也是默认图像的占位符。当滚动条滚动到相应的区域，我们将开始真正的图片加载。
扩展：异步加载数据。它开始仅绑定前两个屏幕的数据。后面的数据没有处理。当页面被卷到相应的区域时，它重新请求数据绑定和渲染数据。
你可以看看下面的数字。
第一个屏幕的延迟加载代码如下所示：
文件
* {
填充：0；
保证金：0；
字体大小：14px；
}
#旗帜{
保证金：10px汽车；
宽度：300px；
身高：150px；
border: 1px solid绿色；
背景：URL（'img /默认。gif）没有重复中心； / *该地区一个默认图表占位符，告诉用户在图像加载。
}
#旗帜img {
显示：无； / *在IMG SRC属性开始没有地址，就在IE浏览器显示一个破碎的地图是不美的，所以我们让它默认是隐藏的，当真正的图片加载显示。
宽度：100%；
身高：100%；
}
VaR的旗帜= document.getelementbyid（'banner），imgfir = banner.getelementsbytagname（'img）{ 0 }
Window.setTimeout（function（）{（）
/ / imgfir.src = imgfir.getattribute（'trueimg）；
/ / imgfir.style.display =块
上述过程是不完整的/地址：如果我们得到真实的图片是错误的，当分配到IMG SRC属性，不仅控制台将是错误的，而页面会出现破图
获取图片地址、地址验证，对赋值有效，不经处理无效。
无功/ oimg = document.createelement（'img）
无功oimg =新形象； / /创建一个临时的img标签
oimg.src = imgfir.getattribute（'trueimg）；
oimg.onload =功能（{ / /）时正常加载图片
imgfir.src = this.src；
imgfir.style.display =块；
oimg = null
console.log（载荷完成）
}
console.log（小于加载中…）
}，500）
多屏单画面延时加载
具体代码如下：
文件
* {
填充：0；
保证金：0；
字体大小：14px；
}
#旗帜{
保证金：10px汽车；
宽度：300px；
身高：150px；
border: 1px solid绿色；
背景：URL（'img /默认。gif）没有重复中心； / *该地区一个默认图表占位符，告诉用户在图像加载。
}
#旗帜img {
显示：无； / *在IMG SRC属性开始没有地址，就在IE浏览器显示一个破碎的地图是不美的，所以我们让它默认是隐藏的，当真正的图片加载显示。
宽度：100%；
身高：100%；
}
VaR的旗帜= document.getelementbyid（'banner），imgfir = banner.getelementsbytagname（'img）{ 0 }
window.onscroll =函数（）{
如果（旗帜。isload）{
返回；
}
创建一个横幅。offsetheight + utils.offset（横幅）。顶；
var b = utils.win（自己）+ utils.win（scrollTop ）；
如果（< b）{
当我们加载真实图片时，第一次加载完成后，我们已经设置了一个过程中，使页面滚动，再次操作之后，导致重复加载到图片中的一个容器中。
无功oimg =新形象；
oimg.src = imgfir.getattribute（'trueimg）；
oimg.onload =函数（）{
imgfir.src = this.src；
imgfir.style.display =阻止；
oimg = null；
}
banner.isload = true； / /设置自定义属性告诉我已经完成了加载图片浏览器（无论是否正常加载，只要一次不处理）
}
}
以上是本文的全部内容，希望能对您有所帮助，希望大家多多支持。