【原生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];

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

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

-Advertisement-

更多相關文章

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 ...
【原生JS】圖片預載入之有序預載入

...
製作404頁面的重要性

在網站的運行過程中會面臨很多問題，當用戶搜索頁面時，會提示伺服器出錯，請求的頁面不存在，程式配置錯誤等問題。用戶請求瀏覽網頁碰到這些的情況時，會自動跳出系統預設的錯誤提示，對用戶體驗造成不好的感觸，也會對蜘蛛爬行收錄造成困擾或者就是不收錄。常見的SEO的Http狀態碼： 404：所請求的頁面不存在 ...