预加载

作者: 胡自鲜 | 来源:发表于2017-11-06 22:44 被阅读0次

预加载与智能预加载 (VIA)
图片预加载
js-事件委托&图片预加载
收藏的博客链接
JS
ViewPager+Fragment预加载和懒加载分析
图片懒加载
前端图片加载优化
JavaScript--预加载与延迟加载
预加载

预加载图片是提高用户体验的一个很好方法。图片预先加载到浏览器中，访问者便可顺利地在你的网站上冲浪，并享受到极快的加载速度。这对图片画廊及图片占据很大比例的网站来说十分有利，它保证了图片快速、无缝地发布，也可帮助用户在浏览你网站内容时获得更好的用户体验。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>预加载</title>
    <style>
        .box{
            width: 600px;
            height: 800px;
            border:1px solid gray;
            position: relative;
            overflow: hidden;
        }
        .progress{
            width: 1000px;
            height: 1000px;
            background-color: lightblue;
            position: absolute;
            top:0;
            /*display: none;*/
        }
        .red{
            width: 400px;
            height: 500px;
            position: absolute;
            top:0;
            background-color: red;
            display: none;
        }
        img{
            width: 80px;
            margin:5px;
        }
    </style>
</head>
<body>
    <div class="box">
        <!--加载页面-->
        <div class="progress">loading...</div>
        <!--主页面-->
        <div class="red">
            <img src="imgs/p_00.jpg" alt="">
            <img src="imgs/p_01.jpg" alt="">
            <img src="imgs/p_02.jpg" alt="">
            <img src="imgs/p_03.jpg" alt="">
            <img src="imgs/p_04.jpg" alt="">
            <img src="imgs/p_05.jpg" alt="">
            <img src="imgs/p_06.jpg" alt="">
            <img src="imgs/p_07.jpg" alt="">
            <img src="imgs/p_08.jpg" alt="">
            <img src="imgs/p_09.jpg" alt="">
        </div>
    </div>
</body>
<script>
    var progress = document.getElementsByClassName('progress')[0];
    var red = document.getElementsByClassName('red')[0];
    var arrSrc = ["imgs/p_00.jpg","imgs/p_01.jpg","imgs/p_02.jpg","imgs/p_03.jpg","imgs/p_04.jpg","imgs/p_05.jpg","imgs/p_06.jpg","imgs/p_07.jpg","imgs/p_09.jpg"];
    var arrImg = [];
    var count = 0;
    for(var i=0; i<arrSrc.length; i++){
        var img = new Image();
        img.src = arrSrc[i];
        img.onload = function(){
            count++
            if(count == arrSrc.length){
                progress.style.display = "none";
                red.style.display = "block";
            }
        }   
    }
</script>
</html>