【原生JS】圖片預載入之有序預載入

-Advertisement-

...

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>PreLoading</title>
    <style>
        *{margin:0; padding:0; border:none; outline:0; text-decoration:none;}
        html,body,.box{width:100%; height:100%;}
        .box{display:none;}
        #img{width:90%; height:90%; margin:2vh auto 0; display:block; box-shadow:0 0 10px gray;}
        .box .btns{width:140px; height:40px; display:block; margin:20px auto;}
        .box .btns .btn{width:60px; height:40px; display:block; border:1px gray solid; background-color:#ccc; text-align:center; line-height:40px; float:left;}
        .box .btns .btn:nth-of-type(2){margin-left:16px;}

        .load{width:100%; height:100%; display:block; font-size:60px; font-family:"微軟雅黑"; color:#ccc; text-align:center; line-height:100vh; position:fixed;}
    </style>
</head>
<body>
    <div class="box">
        <img id="img" src="" alt="pic">
        <p class="btns"><a href="javascript:" class="btn">prev</a><a href="javascript:" class="btn">next</a></p>
    </div>
    <p class="load">0%</p>

    <script type="text/javascript">

        var imgs = ['http://down.699pic.com/photo/50036/7661.jpg?_upt=da51378d1494571758&_upd=500367661.jpg',
                    'http://desk.fd.zol-img.com.cn/t_s1920x1080c5/g5/M00/09/0F/ChMkJljskIqIPX9bAAMPyuIn8DcAAbj8QB7XpYAAw_i343.jpg',
                    'http://desk.fd.zol-img.com.cn/t_s1920x1080c5/g5/M00/09/0F/ChMkJljskLeIaW-JAAIudN_yqvgAAbj8gDQO5AAAi6M64.jpeg',
                    'http://desk.fd.zol-img.com.cn/t_s1920x1080c5/g5/M00/0F/08/ChMkJlauzISIH0uXAARUHuJLVX8AAH8-gHu6zsABFQ2166.jpg',
                    'http://desk.fd.zol-img.com.cn/t_s1920x1080c5/g5/M00/0F/08/ChMkJlauzISIIL5TAAObxg4-XeUAAH8-gHzP3EAA5ve000.jpg'];
        
        // 綁定按鈕事件

        var btns = document.getElementsByClassName('btn'),
            img = document.getElementById('img'),
            index = 0;

        for(var i=0;i<btns.length;i++){
            btns[i].onclick = function(){
                if(this.innerHTML === 'next'){
                    index = Math.min(++index , imgs.length-1);
                    img.setAttribute('src',imgs[index]);
                }
                if(this.innerHTML === 'prev'){
                    index = Math.max(--index , 0);
                    img.setAttribute('src',imgs[index]);
                }
            }
        }

        // 計數變數

        var count = 0,
            load = document.getElementsByClassName('load')[0],
            box = document.getElementsByClassName('box')[0];

        // 有序預載入

        var imgObj = new Image();        
        function loading(){
            imgObj.onload = function(){
                load.innerHTML = Math.round((count + 1) / imgs.length * 100) + '%';
                if(count >= imgs.length){
                    load.style.display = 'none';
                    box.style.display = 'block';
                    img.setAttribute('src',imgs[0]);
                    document.title = '1/' + imgs.length;
                }
                else{
                    loading();
                }
            }
            imgObj.onerror = function(){
                load.innerHTML = Math.round((count + 1) / imgs.length * 100) + '%';
                if(count >= imgs.length){
                    load.style.display = 'none';
                    box.style.display = 'block';
                    img.setAttribute('src',imgs[0]);
                    document.title = '1/' + imgs.length;
                }
                else{
                    loading();
                }
            }
            imgObj.src = imgs[count];
            count++;
        }
        loading();
    </script>
</body>
</html>

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

css實現自適應正方形的方法

頁面佈局中，我們經常需要用百分比來實現寬度自適應，但是如果這時候高度要跟寬度呈固定比例變化，該怎麼辦呢？ ...
Ajax理解總結

前端開發拿數據頁面實時更新是離不開Ajax這個技術的 AJAX即“Asynchronous Javascript And XML”（非同步JavaScript和XML），是指一種創建互動式網頁應用的網頁開發技術。 ps:非同步的javascript和XML技術,可以在不刷新重載整個網頁情況下更新部分頁面 ...
js中cookie的使用以及缺點

什麼是Cookie Cookie意為“甜餅”，是由W3C組織提出，最早由Netscape社區發展的一種機制。目前Cookie已經成為標準，所有的主流瀏覽器如IE、Netscape、Firefox、Opera等都支持Cookie。由於HTTP是一種無狀態的協議，伺服器單從網路連接上無從知道客戶身份。 ...
從零開始學習html（十）CSS格式化排版——上

一、文字排版--字體我們可以使用css樣式為網頁中的文字設置字體、字型大小、顏色等樣式屬性。下麵我們來看一個例子，下麵代碼實現：為網頁中的文字設置字體為宋體。這裡註意不要設置不常用的字體，因為如果用戶本地電腦上如果沒有安裝你設置的字體，就會顯示瀏覽器預設的字體。（因為用戶是否可以看到你設置的字體 ...
js分片上傳大文件，前端代碼

首先導入jQuery.form.js文件，下麵src是相對於改js文件位置， <script type="text/JavaScript" src="jquery/jquery-form.js"></script> <script type="text/javascript">var BYTES_P ...
實現javascript下的模塊組織

[1]反模式 [2]字面量 [3]IIFE [4]IIFE傳參 [5]命名空間 ...
js中addEventListener第三個參數涉及到的事件捕獲與冒泡

js中，我們可以給一個dom對象添加監聽事件，函數就是 addEventListener("click",function(){},true); 很容易理解，第一個參數是事件類型，比如點擊(click)、觸摸(touchstart)，第二個參數就是事件函數，比如我給一個button添加alert ...
js獲取瀏覽器和設備相關width（屏幕的寬度）

首先呢，我們將iPhone手機的相關數據表示如下我們要理解很多東西，比如邏輯解析度、物理解析度、縮放因數、ppi等，這裡先不討論。首先呢，我們先介紹下各個屏幕寬度：網頁可見區域寬： document.body.clientWidth網頁可見區域高： document.body.clientHe ...