快捷導(dǎo)航

多種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)求。

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

您可能感興趣的文章:

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

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

相關(guān)文章

最新評(píng)論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具