我一直在閱讀處理圖像的網站（當用戶點擊一個元素時循環顯示的圖像）和它的最佳方式似乎預加載器是有利的。這是preloader工作嗎？這不是用來顯示狀態，只是加快可能的圖像加載以後

鑑於您可以取出預加載器，當前設置將簡單地將image1插入到數組中的div中，預加載器是通過在啓動時包含所有潛在的HTML請求來工作的，因此減少了潛在的加載時間，這是一個無用的實現，因爲它被寫入？

我應該實際上是從imageObj在.append(...)圖像？

- 注意 - 我知道我實際上只允許調用image1，但這僅僅是一種練習。

HTML

<body> 
    <a href='#' id="image1"> 
    Click for image 1 
    </a> 
    <hr/> 
    <a href='#' id="image2"> 
    Click for image 2 
    </a> 
    <hr/> 
    <a href='#' id="image3"> 
    Click for image 3 
    </a> 
    <hr/> 
    <a href='#' id="image4"> 
    Click for image 4 
    </a> 
    <div id="image"> 
    </div> 
</body>

的JavaScript/jQuery的

// JavaScript Document 

function preloader() 
{ 
    var i = 0; 

    imageObj = new Image(); 

    images = new Array(); 
    images[0]="images/image1.jpg" 
    images[1]="images/image2.jpg" 
    images[2]="images/image3.jpg" 
    images[3]="images/image4.jpg" 

    for(i=0; i<=3; i++) 
    { 
     imageObj.src=images[i]; 
    } 
} 

$(document).ready(function(){ 

    preloader(); 

    $('#image1').click(function(){ 
     alert("Handler for #image1 .click() called."); 
     $('#image').append('<img id="theImg" src=' + images[0] + ' />'); 
    }); 

});

來源

2012-06-12 ja_him

這段代碼的作用是隻「觸摸」每一個可能的圖像，它被加載到你的緩存，但如果說有沒有你的DOM感。

實際上我是否應該從.append（...）中的imageObj中獲取圖像？

不，該部分只是強制get預載圖像到您的瀏覽器緩存中。注意它在循環中幾乎立即被覆蓋。

如果你想要起泡的加載速度，那麼也要考慮讓你的圖像來自多個子域或CDN。

來源

2012-06-12 14:06:19

啊，是的，好點我沒有考慮過。非常感謝！然後，我會把這個貼在'有用'的圖書館裏。 :) 感謝您指向多個子域/ CDN。非常感謝。 –

這是preloader工作嗎？這不是用來顯示狀態，只是加快可能的圖像加載以後

HTML

的JavaScript/jQuery的

回答

相關問題