<html>
<head>
<title>Page Title</title>
<meta http-equiv="Content-Type" content="text/html charset=UTF-8" />
<script>
onload = function() {
var imgs = document.querySelectorAll("img")
console.log("加载中...")
for (var i = 0 i < imgs.length i++) {
var img = imgs[i]
(function(i) {
setTimeout(function() {
img.src = "a" + i + ".jpg"
img.onload = function(){
if(i == imgs.length - 1){
console.info("加载完毕")
}
}
img.onerror = function(){
console.error("加载错误")
}
}, 2000 * i)
})(i)
}
}
</script>
</head>
<body>
<img />
<img />
<img />
<img />
</body>
</html>
图片先用占位符表示，不要将图片地址放到src属性中，而是放到其它属性(data-original)中
页面加载完成后，监听窗口滚动，当图片出现在视窗中时再给它赋予真实的图片地址，也就是将data-original中的属性拿出来放到src属性中
在滚动页面的过程中，通过给scroll事件绑定lazyload函数，不断的加载出需要的图片
注意：请对lazyload函数使用防抖与节流，不懂这两的可以自己去查
3.可视区加载
这里也分为两种情况
1、页面滚动的时候计算图片的位置与滚动的位置
2、通过新的API： IntersectionObserver API（可以自动"观察"元素是否可见）
如上，data- 属于自定义属性， ele.dataset. 可以读取自定义属性集合
img.srcset 属性用于设置不同屏幕密度下，image自动加载不同的图片，比如<img src="image-128.png" srcset="image-256.png 2x" />
预加载
提前加载图片，当用户需要查看时可直接从本地缓存中渲染
加载方式目前主要有两种
待到满足触发条件后，再通过JS渲染
