起因
源於文件拍照的列表頁預覽圖，由於圖片過大，後端設計時又沒有考慮到略縮圖的設計，原圖片加載時會有加載到一半圖片截斷的顯示效果，爲避免這種顯示問題，決定使用默認圖片填充和js隱式加載圖片的方式。
方案
1.爲每個img標籤添加統一默認的src指向默認顯示的小圖，同時爲每個標籤賦值data-original屬性指向圖片真正的地址
2.頁面加載完畢時，針對每一個img標籤，創建一個隱藏img標籤加載其data-original屬性指向的圖片，加載完畢後將該img標籤src屬性修改指向正確的圖片地址。
demo如下：
<!DOCTYPE html>
<html>
<head>
<title>圖片延遲加載</title>
<meta charset="utf-8">
<style>
img{
height: 300px;
width: 300px;
}
</style>
</head>
<body>
<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1227865842,733762983&fm=26&gp=0.jpg" data-original="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1589288897169&di=bf1b75fb9cc67483250a10a9b83ce72c&imgtype=0&src=http%3A%2F%2Fb.zol-img.com.cn%2Fdesk%2Fbizhi%2Fimage%2F3%2F1920x1080%2F1372990711605.jpg" >
<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1227865842,733762983&fm=26&gp=0.jpg" data-original="http://p1.hoopchina.com.cn/personPic/f0eda54a-4601-47ee-979e-83a5e0d9f59b.jpg" >
<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1227865842,733762983&fm=26&gp=0.jpg" data-original="http://inews.gtimg.com/newsapp_match/0/10902577377/0.jpg" >
<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1227865842,733762983&fm=26&gp=0.jpg" data-original="http://pic.rmb.bdstatic.com/5043a29281b583fbdbd1ce66e134c3a8.jpeg" >
<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1227865842,733762983&fm=26&gp=0.jpg" data-original="http://img0.imgtn.bdimg.com/it/u=2165776750,2822679240&fm=26&gp=0.jpg" >
<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1227865842,733762983&fm=26&gp=0.jpg" data-original="http://h.hiphotos.baidu.com/zhidao/pic/item/5fdf8db1cb1349548e51ce14504e9258d1094a76.jpg" >
<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1227865842,733762983&fm=26&gp=0.jpg" data-original="http://i0.hdslb.com/bfs/article/91d931443c91a7e297b04ea548d77cdaad3b979e.jpg" >
<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1227865842,733762983&fm=26&gp=0.jpg" data-original="http://img1.imgtn.bdimg.com/it/u=1467078954,571514791&fm=26&gp=0.jpg" >
<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1227865842,733762983&fm=26&gp=0.jpg" data-original="http://img0.imgtn.bdimg.com/it/u=1935098892,2602167784&fm=26&gp=0.jpg" >
<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1227865842,733762983&fm=26&gp=0.jpg" data-original="http://dik.img.kttpdq.com/pic/1/614/43e960e29f3a5cea_1680x1050.jpg" >
<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1227865842,733762983&fm=26&gp=0.jpg" data-original="http://inews.gtimg.com/newsapp_match/0/5646911939/0.jpg" >
<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1227865842,733762983&fm=26&gp=0.jpg" data-original="http://5b0988e595225.cdn.sohucs.com/images/20190311/8bd169f753bc420fb87354583329c644.png" >
<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1227865842,733762983&fm=26&gp=0.jpg" data-original="http://5b0988e595225.cdn.sohucs.com/images/20181204/db468d8eddd04f888a3be04a506f1789.jpeg" >
<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1227865842,733762983&fm=26&gp=0.jpg" data-original="http://imgsrc.baidu.com/forum/pic/item/881b3c01213fb80e653693033ad12f2ebb389475.jpg" >
<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1227865842,733762983&fm=26&gp=0.jpg" data-original="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1589289791585&di=52f914b1703dd148ff1c333f31d68294&imgtype=0&src=http%3A%2F%2Fe.hiphotos.baidu.com%2Fspace%2Fpic%2Fitem%2F0b46f21fbe096b635a35f1f90c338744ebf8ac6f.jpg" >
<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1227865842,733762983&fm=26&gp=0.jpg" data-original="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3893776641,1745824786&fm=26&gp=0.jpg" >
<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1227865842,733762983&fm=26&gp=0.jpg" data-original="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1589289844646&di=8919e223c716f1a480a58b79fb795299&imgtype=0&src=http%3A%2F%2Ff.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2F8435e5dde71190ef6b0dcde6cd1b9d16fdfa6010.jpg" >
<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1227865842,733762983&fm=26&gp=0.jpg" data-original="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1589289859690&di=e17f5f0414a4386ccd67ae45fb994e54&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20181027%2F1a2f1d7258444b1c831917d950de2d07.png" >
<script>
window.onload = function(){
var imgs = document.getElementsByTagName("img");
var tempImg = new Array(imgs.length);
for(var i=0;i<imgs.length;i++){
img = imgs[i];
tempImg[i] = document.createElement("img");
tempImg[i].src = img.attributes["data-original"].value;
tempImg[i].onload = function(index){
imgs[index].src = imgs[index].attributes["data-original"].value;
}.bind(this,i)
}
}
</script>
</body>
</html>
完整代碼地址：github地址