簡單有效的JavaScript圖片預加載效果

首先編寫一個簡單的容器：

<style>
#content {
    width: 600px;
    height: 100vh;
    overflow-y: auto;
}

#content ul {
    width: 100%;
}

#content ul li {
    width: 50%;
    float: left;
    margin: 20px 0;
    list-style: none;
}

#content ul li p {
    width: 200px;
    height: 200px;
    overflow: hidden;
    margin: 0 auto;
    border: 1px solid #999999;
}

#content ul li p img {
    width: 100%;
    display: block;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}
</style>
<div id="content">
   <ul>
   </ul>
</div>

然後，編寫js代碼：

let imageArr = [{
    img_url: "http://www.lexilisi.com/Uploadpth/c45cc952-dcb7-493c-a171-357d1b820b37.png",
}, {
    img_url: "http://xiaobanyou.com/static/images/xby_user_3.jpg",
}, {
    img_url: "http://xiaobanyou.com/static/images/xby_user_4.jpg",
}, {
    img_url: "http://xiaobanyou.com/static/images/xby_user_5.jpg",
}, {
    img_url: "http://xiaobanyou.com/static/images/xby_user_6.jpg",
}, {
    img_url: "http://xiaobanyou.com/static/images/xby_user_799.jpg",
}];
const lazyLoad = (src) => {
    //加載loading動畫
    let _image = new Image();
    _image.src = './loading.gif';
    //加載需要展示的圖片
    let _image_ = new Image();
    _image_.src = src;
    //加載成功，將loading圖片路徑改成對應的真實路徑
    _image_.onload = _ => _image.src = _.currentTarget.src;
    //加載失敗，將loading圖片路徑改成默認圖片路徑
    _image_.onerror = _ => _image.src = './error.png';
    return _image;
}
let _content = document.getElementById('content');
let _ul = _content.getElementsByTagName('ul');
imageArr.forEach(value => {
    let _li = document.createElement('li');
    let _p = document.createElement('p');
    let _image = lazyLoad(value.img_url);
    _p.appendChild(_image);
    _li.appendChild(_p);
    _ul[0].appendChild(_li);
})

展示效果如圖：

每個圖片都是異步加載，加載完成後：

 

以上，希望對大家有所幫助。