多種js圖片預(yù)加載實(shí)現(xiàn)方式分享

更新時(shí)間：2016年02月19日 08:48:32 作者：chua1989

這篇文章主要為大家詳細(xì)介紹了多種js圖片預(yù)加載實(shí)現(xiàn)方式，包括html標(biāo)簽或css加載圖片、純js實(shí)現(xiàn)預(yù)加載，感興趣的小伙伴們可以參考一下

圖片預(yù)加載有大體有幾種方式

1.html標(biāo)簽或css加載圖片

　　顯而易見我們使用img標(biāo)簽或者通過標(biāo)簽的background-image屬性都可以實(shí)現(xiàn)圖片的預(yù)加載。但是為了避免初次載入過多圖片影響體驗(yàn)。一般最好在文檔渲染完成以后再加載（使用window.onload等）。

2.純js實(shí)現(xiàn)預(yù)加載

空城計(jì)-Code記的Javascript實(shí)現(xiàn)圖片的預(yù)加載的完整實(shí)現(xiàn)的預(yù)加載實(shí)例為

function preloadimages(arr){  
  var newimages=[], loadedimages=0
  var postaction=function(){} //此處增加了一個(gè)postaction函數(shù)
  var arr=(typeof arr!="object")? [arr] : arr
  function imageloadpost(){
    loadedimages++
    if (loadedimages==arr.length){
      postaction(newimages) //加載完成用我們調(diào)用postaction函數(shù)并將newimages數(shù)組做為參數(shù)傳遞進(jìn)去
    }
  }
  for (var i=0; i<arr.length; i++){
    newimages[i]=new Image()
    newimages[i].src=arr[i]
    newimages[i].onload=function(){
      imageloadpost()
    }
    newimages[i].onerror=function(){
      imageloadpost()
    }
  }
  return { //此處返回一個(gè)空白對(duì)象的done方法
    done:function(f){
      postaction=f || postaction
    }
  }
}

　　原理就是循環(huán)創(chuàng)建Image對(duì)象，并設(shè)置對(duì)象的src為指定圖片，然后監(jiān)聽圖片加載完成onload = function(){imageloadpost()}，當(dāng)圖片加載完成后就會(huì)執(zhí)行到imageloadpost。原來IE6還有一個(gè)問題：如果預(yù)加載的圖片已經(jīng)在內(nèi)存中則不會(huì)再次出發(fā)img.onload事件。但是IE7+都沒有問題了。其他瀏覽器也沒有問題，所以上面這種img.onload監(jiān)聽事件已經(jīng)沒有兼容問題了。

3.Ajax實(shí)現(xiàn)預(yù)加載

　　ajax請(qǐng)求是任何數(shù)據(jù)都可以請(qǐng)求的，圖片也不例外。先看一下js/css預(yù)加載

// XHR to request a JS and a CSS 
    var xhr = new XMLHttpRequest(); 
    xhr.open('GET', 'http://domain.tld/preload.js'); 
    xhr.send(''); 
    xhr = new XMLHttpRequest(); 
    xhr.open('GET', 'http://domain.tld/preload.css'); 
    xhr.send('');

而圖片的ajax預(yù)加載實(shí)際和純js預(yù)加載圖片一樣

new Image().src = "http://domain.tld/preload.png";

只不過這里的解釋成了ajax加載，可以理解new Image都是ajax get請(qǐng)求。

以上就是本文的全部內(nèi)容，希望對(duì)大家理解js圖片預(yù)加載有所幫助。

您可能感興趣的文章:

相關(guān)文章

解決bootstrap下拉菜單點(diǎn)擊立即隱藏bug的方法
本篇文章主要介紹了解決bootstrap下拉菜單點(diǎn)擊立即隱藏bug的方法，具有一定的參考價(jià)值，有興趣的可以了解一下
2017-06-06
JavaScript自動(dòng)生成24小時(shí)時(shí)間區(qū)間
這篇文章主要介紹了JavaScript自動(dòng)生成24小時(shí)時(shí)間區(qū)間，就以時(shí)間區(qū)間為字符串展開主題香瓜內(nèi)容，需要的朋友可以參考一下
2022-06-06
JS二級(jí)菜單不同實(shí)現(xiàn)方法分析【4種方法】
這篇文章主要介紹了JS二級(jí)菜單不同實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了4種不同的二級(jí)下拉菜單實(shí)現(xiàn)方法,需要的朋友可以參考下
2018-12-12
詳解webpack-dev-server使用http-proxy解決跨域問題
這篇文章主要介紹了詳解webpack-dev-server使用http-proxy解決跨域問題，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-01-01
JavaScript實(shí)現(xiàn)點(diǎn)擊單元格改變背景色的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)點(diǎn)擊單元格改變背景色的方法,涉及JavaScript響應(yīng)鼠標(biāo)事件動(dòng)態(tài)操作頁面元素屬性的相關(guān)技巧,需要的朋友可以參考下
2016-02-02
JS實(shí)現(xiàn)旋轉(zhuǎn)木馬式圖片輪播效果
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)旋轉(zhuǎn)木馬式圖片輪播效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-01-01
JS中判斷字符串中是否包含指定字符的幾種方法
本文介紹了字符串處理的五種方法,包含indexOf()用于獲取字符串中指定字符首次出現(xiàn)的位置,includes()判斷字符串是否包含某個(gè)值,match()用正則表達(dá)式匹配字符串,正則表達(dá)式創(chuàng)建與檢查匹配,search()執(zhí)行搜索并返回匹配的索引位置,下面就來介紹一下
2024-09-09
ES6學(xué)習(xí)教程之Promise用法詳解
這篇文章主要給大家介紹了關(guān)于ES6學(xué)習(xí)教程之Promise用法的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-11-11
JavaScript倒計(jì)時(shí)定時(shí)器和間隔定時(shí)器使用詳解
這篇文章主要為大家介紹了JavaScript倒計(jì)時(shí)定時(shí)器和間隔定時(shí)器使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪<BR>
2023-05-05
javascript使用smipleChart實(shí)現(xiàn)簡單圖表
這篇文章主要介紹了javascript使用smipleChart實(shí)現(xiàn)簡單圖表的方法及示例分享,需要的朋友可以參考下
2015-01-01