預加載原理就是在瀏覽器加載頁面的時候先創建一個對象，然后填充數據，從而達到預先加載的效果。（即按照文檔流順序，先利用js加載函數去加載圖片，然后在渲染dom元素）
代碼如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js預加載</title> </head> <script> //針對firefox window.addEventListener("DOMContentLoaded", preloadImages); //創建圖片數據 var imageArray = new Array("http://bizhi.zhuoku.com/2010/10/22/kuanping/kuanping39.jpg", "http://img1.3lian.com/2015/w7/90/d/5.jpg"); preloadImages(imageArray); function preloadImages(imageArray) { for(var i = 0; i < imageArray.length; i++) { //創建圖片對象 var tempImage = new Image(); //填充圖片 tempImage.src = imageArray[i]; document.write('<img src="' + imageArray[i] + '" />'); } } </script> <body> </body> </html>
附圖：
從上圖看不出什么預加載的效果。
那我設置一下網絡的狀態，就看得出效果了
從上圖可見，圖片明顯是提前加載了。
PS:此代碼僅用於研究預加載功能具體怎么實現。具體請參考jquery.preload.js插件。
總結：實際的項目中，建議使用jquery.preload.js插件實現預加載技術，提高頁面性能。