//myPreload.js文件
var image= new Image()
image.class="lazy" src="//p2.ttnews.xyz/loading.gif" data-original="http://pic26.nipic.com/20121213/6168183 004444903000 2.jpg" 

• 使用XMLHttpRequest對象,雖然存在跨域問題，但會精細控制預加載過程

var xmlhttprequest=new XMLHttpRequest()；
xmlhttprequest.onreadystatechange=callback；
xmlhttprequest.onprogress=progressCallback；
xmlhttprequest.open("GET","http://image.baidu.com/mouse,jpg",true）；
xmlhttprequest.send()；
function callback(){
 if(xmlhttprequest.readyState==4&& xmlhttprequest.status==200){
 var responseText=xmlhttprequest.responseText；
 }else{
 console.log("Request was unsuccessful:"+xmlhttprequest.status）；
 }
}
function progressCallback(e){
e=e || event；
if(e.lengthComputable){
console.log("Received"+e.loaded+"of"+e.total+"bytes")
}
}

• 使用PreloadJS庫

PreloadJS提供了一種預加載內容的一致方式，以便在HTML應用程序中使用。預加載可以使用HTML標籤以及XHR來完成。默認情況下，PreloadJS會嘗試使用XHR加載內容，因為它提供了對進度和完成事件的更好支持，但是由於跨域問題，使用基於標記的加載可能更好。

//使用preload.js
var queue=new createjs.LoadQueue()；//默認是xhr對象，如果是new createjs.LoadQueue(false)是指使用HTML標籤，可以跨域 

queue.on("complete",handleComplete,this);
queue.loadManifest([
{id:"myImage",src:"//p2.ttnews.xyz/5bc3b1ffbd3c314ce60eb5ff.jpg"},
{id："myImage2"，src:"http://pic9.nipic.com/20100814/2839526 1931471581702.jpg"}
])；
function handleComplete(){
 var image=queue.getResuLt("myImage");
 document.body.appendChild(image);
}

三、懶加載和預加載的對比

兩者都是提高頁面性能有效的辦法，兩者主要區別是一個是提前加載，一個是遲緩甚至不加載。懶加載對服務器前端有一定的緩解壓力作用，預加載則會增加服務器前端壓力。

這些技術如何學習，有沒有免費資料？

對前端的技術，架構技術感興趣的同學關注我的頭條號，並在後臺私信發送關鍵字：“前端”即可獲取免費的架構師學習資料

知識體系已整理好，歡迎免費領取。還有面試視頻分享可以免費獲取。關注我，可以獲得沒有的架構經驗哦！

閱讀更多 前端攻城小牛 的文章

關鍵字: 浪裡 HTML 之懶