成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

JS進(jìn)階篇--實(shí)現(xiàn)圖片的預(yù)加載詳解

pkwenda / 1653人閱讀

摘要：在項(xiàng)目中常常需要用到的圖片預(yù)加載效果。幸運(yùn)的是，這個(gè)功能實(shí)現(xiàn)起來并不難，我們可以使用和事件去處理決定圖片是否加載完成或者失敗?，F(xiàn)在，我們將為函數(shù)增加一個(gè)回調(diào)函數(shù)來處理后續(xù)的操作。如此之后，我們調(diào)用函數(shù)的代碼可能會(huì)如下面這樣。

在web項(xiàng)目中常常需要用到的圖片預(yù)加載效果。

下面的函數(shù)實(shí)現(xiàn)了一個(gè)我們想要的最基本的圖片預(yù)加載效果

function preloadimages(arr){
    var newimages=[]
    var arr=(typeof arr!="object")? [arr] : arr  //確保參數(shù)總是數(shù)組
    for (var i=0; i

我們可以通過如下的方式加載我們想要的圖片：


preloadimages(["1.gif", "2.gif", "3.gif"])



上面的方法已經(jīng)可以滿足我們最基本的預(yù)加載圖片的效果了，但情況往往并不如此，我們往往需要確切的知道圖像是否被真正加載完成，并可能在后續(xù)執(zhí)行一系列對(duì)圖片的操作功能。幸運(yùn)的是，這個(gè)功能實(shí)現(xiàn)起來并不難，我們可以使用onload和onerror事件去處理決定圖片是否加載完成（或者失敗）。在本文的最終實(shí)現(xiàn)代碼中，我們將會(huì)把proloadimages()函數(shù)改造成如下的樣子。


preloadimages(["1.gif", "2.gif", "3.gif"]).done(function(images){
 //當(dāng)圖片全部加載完成之后，執(zhí)行此處的代碼
 //images參數(shù)是Array類型，對(duì)應(yīng)加載進(jìn)來的圖像
 //images[0] 對(duì)應(yīng)的是第一張圖像
})



首先我們用image對(duì)象的onload和onerror事件處理函數(shù)來檢測(cè)圖片的加載情況（成功或失?。?，改造后的代碼如下。


function preloadimages(arr){
    var newimages=[], loadedimages=0
    var arr=(typeof arr!="object")? [arr] : arr
    function imageloadpost(){
        loadedimages++
        if (loadedimages==arr.length){
            alert("圖片已經(jīng)加載完成")
        }
    }
    for (var i=0; i

我們可以使用代碼2的調(diào)用方法測(cè)試該函數(shù)，當(dāng)圖片全部加載完成（成功或失敗）后，瀏覽器將會(huì)彈出“圖片已經(jīng)加載完成”的消息。


現(xiàn)在，我們將為preloadimages()函數(shù)增加一個(gè)回調(diào)函數(shù)來處理后續(xù)的操作。


通常我們會(huì)為我們的preloadimages()函數(shù)增加一個(gè)匿名函數(shù)做為參數(shù)，來完成我們需要的功能。如此之后，我們調(diào)用preloadimages()函數(shù)的代碼可能會(huì)如下面這樣。


preloadimages(imagesarray, function(){
 //圖片加載完成之后執(zhí)行的操作
})



但是我們現(xiàn)在來做一點(diǎn)點(diǎn)改變，讓代碼看起來更直觀，更易于理解，改造完成之后，preloadimages()函數(shù)的調(diào)用看起來如下所示。


preloadimages(imagesarray).done(function(){
 //圖片加載完成后的操作
})



上面這種寫法大家一看一定都會(huì)覺得非常清晰明了，那么接下來，我們繼續(xù)來改造我們的preloadimages()函數(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){
          //加載完成用我們調(diào)用postaction函數(shù)并將newimages數(shù)組做為參數(shù)傳遞進(jìn)去
            postaction(newimages) 
        }
    }
    for (var i=0; i

上面的代碼，我們稍作修改了幾個(gè)地方： 


首先，我們?cè)黾恿艘粋€(gè)postaction函數(shù)，該函數(shù)被用來做為圖片加載完成后的回調(diào)函數(shù)，用戶可以在后面調(diào)用的時(shí)候用自己的處理函數(shù)覆蓋掉該函數(shù)。


第二，我們的preloadimages()函數(shù)返回了一個(gè)空對(duì)象，其中包含一個(gè)簡單的done()方法，這是實(shí)現(xiàn)本次改造的關(guān)鍵所在，確保了鏈?zhǔn)秸{(diào)用的實(shí)現(xiàn)。


最后，我們的調(diào)用變?yōu)槿缦滦问剑?/p>

 preloadimages(["1.gif", "2.gif", "3.gif"]).done(function(images){
   alert(images.length) //alerts 3
  alert(images[0].src+" "+images[0].width) //alerts "1.gif 220"
})



當(dāng)然，我們還可以在done()里實(shí)現(xiàn)各種我們需要的圖片操作！

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/78106.html

相關(guān)文章

  • JS進(jìn)階篇--RequireJS模塊化編程詳解

    摘要：所有依賴這個(gè)模塊的語句，都定義在一個(gè)回調(diào)函數(shù)中，等到加載完成之后，這個(gè)回調(diào)函數(shù)才會(huì)運(yùn)行。 1.模塊的寫法 模塊化編程一般都有這么幾個(gè)過渡過程，如下描述。 原始方法 function m1(){ 　　//... } function m2(){ 　　//... } 上面的函數(shù)m1()和m2()，組成一個(gè)模塊。使用的時(shí)候，直接調(diào)用就行了。 這種做法的缺點(diǎn)很明顯：污染了全局變量，無法保證不與...

    妤鋒シ 評(píng)論0 收藏0

  • CSS及布局

    摘要：經(jīng)過半年的打磨，正式發(fā)布，主要是新增了一些常用組件，并使用命名，為接下來的微信小程序開發(fā)做好準(zhǔn)備。這兩種方式實(shí)現(xiàn)的瀑布流式布局均支持首屏和網(wǎng)頁窗口大小改變時(shí)的列數(shù)自適應(yīng)。主要是對(duì)于標(biāo)準(zhǔn)里的布局方式草案中的布局方式進(jìn)行一些總結(jié)。 一勞永逸的搞定 flex 布局 尋根溯源話布局 一切都始于這樣一個(gè)問題：怎樣通過 CSS 簡單而優(yōu)雅的實(shí)現(xiàn)水平、垂直同時(shí)居中。記得剛開始學(xué)習(xí) CSS 的時(shí)候，看...

    jaysun 評(píng)論0 收藏0

  • 個(gè)人分享--web前端學(xué)習(xí)資源分享

    摘要：前言月份開始出沒社區(qū)，現(xiàn)在差不多月了，按照工作的說法，就是差不多過了三個(gè)月的試用期，準(zhǔn)備轉(zhuǎn)正了一般來說，差不多到了轉(zhuǎn)正的時(shí)候，會(huì)進(jìn)行總結(jié)或者分享會(huì)議那么今天我就把看過的一些學(xué)習(xí)資源主要是博客，博文推薦分享給大家。 1.前言 6月份開始出沒社區(qū)，現(xiàn)在差不多9月了，按照工作的說法，就是差不多過了三個(gè)月的試用期，準(zhǔn)備轉(zhuǎn)正了！一般來說，差不多到了轉(zhuǎn)正的時(shí)候，會(huì)進(jìn)行總結(jié)或者分享會(huì)議！那么今天我就...

    sherlock221 評(píng)論0 收藏0

  • 【連載】前端個(gè)人文章整理-從基礎(chǔ)到入門

    摘要：個(gè)人前端文章整理從最開始萌生寫文章的想法，到著手開始寫，再到現(xiàn)在已經(jīng)一年的時(shí)間了，由于工作比較忙，更新緩慢，后面還是會(huì)繼更新，現(xiàn)將已經(jīng)寫好的文章整理一個(gè)目錄，方便更多的小伙伴去學(xué)習(xí)。 showImg(https://segmentfault.com/img/remote/1460000017490740?w=1920&h=1080); 個(gè)人前端文章整理 從最開始萌生寫文章的想法，到著手...

    madthumb 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<