JS預(yù)加載

js預(yù)加載

意義:

與懶加載相反灼擂,有時我們需要實現(xiàn)例如快速快速切換頁面、圖片之類的功能時,能盡快的加載出我們所需的圖片會極大提升用戶體驗育灸,這時用預(yù)加載將圖片先緩存到瀏覽器,用戶使用需顯示圖片時無疑會順暢很多昵宇。

原理:

1.在html中用img標(biāo)簽
2.使用JavaScript的Imgage對象
3.ajax請求圖片
4.preload.js插件

實現(xiàn)

1.使用html文檔中img標(biāo)簽

      <img src="./img/loading.jpg" alt="圖片" style="display:none">

      執(zhí)行文檔時直接加載進(jìn)來只不過讓其不顯示

2.使用Imgage對象

      var img=new Image()
      img.src="http://www.wwenj.com/img/1.jpg"

      js中執(zhí)行到該語句后就會加載進(jìn)來

3.使用ajax請求圖片

      直接用ajax請求很好理解不貼代碼磅崭,
      優(yōu)點:ajax請求過程中能有更加詳細(xì)的操作
      缺點:有跨域
  1. preload.js預(yù)加載插件

       "PreloadJS"便于預(yù)先加載資源:圖像、聲音瓦哎、數(shù)據(jù)砸喻、或其他的JS
    
         [PreloadJS插件地址:](http://www.createjs.cc/preloadjs/)[http://www.createjs.cc/preloadjs/]      
    

    (http://www.createjs.cc/preloadjs/)

      (PreloadJS提供了一個一致的方式預(yù)先加載在HTML應(yīng)用的內(nèi)容,以及預(yù)加載可以使用HTML標(biāo)      
  簽作為XHR完成蒋譬。
      默認(rèn)恩够, PreloadJS 將嘗試使用XHR加載內(nèi)容,因為它提供了進(jìn)度和完成事件方面的更好支持羡铲, 
 然而由于跨域的問題蜂桶,它可能仍然是優(yōu)選使用基于標(biāo)簽的負(fù)載代替)

代碼:
var queue = new createjs.LoadQueue();

       queue.on("complete", handleComplete, this);
       queue.loadManifest([
           {id: "myImage", src:"path/to/myImage.jpg"} 
       ]);
       function handleComplete() {
           var image = queue.getResult("myImage");
           document.body.appendChild(image);
       }

這就是圖片預(yù)加載的實現(xiàn)。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末也切,一起剝皮案震驚了整個濱河市扑媚,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌雷恃,老刑警劉巖疆股,帶你破解...
    沈念sama閱讀 219,366評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異倒槐,居然都是意外死亡旬痹,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,521評論 3 395
  • 文/潘曉璐 我一進(jìn)店門讨越,熙熙樓的掌柜王于貴愁眉苦臉地迎上來两残,“玉大人,你說我怎么就攤上這事把跨∪斯” “怎么了?”我有些...
    開封第一講書人閱讀 165,689評論 0 356
  • 文/不壞的土叔 我叫張陵着逐,是天一觀的道長崔赌。 經(jīng)常有香客問我意蛀,道長,這世上最難降的妖魔是什么健芭? 我笑而不...
    開封第一講書人閱讀 58,925評論 1 295
  • 正文 為了忘掉前任县钥,我火速辦了婚禮,結(jié)果婚禮上慈迈,老公的妹妹穿的比我還像新娘若贮。我一直安慰自己,他們只是感情好吩翻,可當(dāng)我...
    茶點故事閱讀 67,942評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著锥咸,像睡著了一般狭瞎。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上搏予,一...
    開封第一講書人閱讀 51,727評論 1 305
  • 那天熊锭,我揣著相機與錄音,去河邊找鬼雪侥。 笑死碗殷,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的速缨。 我是一名探鬼主播锌妻,決...
    沈念sama閱讀 40,447評論 3 420
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼旬牲!你這毒婦竟也來了仿粹?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,349評論 0 276
  • 序言:老撾萬榮一對情侶失蹤原茅,失蹤者是張志新(化名)和其女友劉穎吭历,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體擂橘,經(jīng)...
    沈念sama閱讀 45,820評論 1 317
  • 正文 獨居荒郊野嶺守林人離奇死亡晌区,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,990評論 3 337
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了通贞。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片朗若。...
    茶點故事閱讀 40,127評論 1 351
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖昌罩,靈堂內(nèi)的尸體忽然破棺而出捡偏,到底是詐尸還是另有隱情,我是刑警寧澤峡迷,帶...
    沈念sama閱讀 35,812評論 5 346
  • 正文 年R本政府宣布银伟,位于F島的核電站你虹,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏彤避。R本人自食惡果不足惜傅物,卻給世界環(huán)境...
    茶點故事閱讀 41,471評論 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望琉预。 院中可真熱鬧董饰,春花似錦、人聲如沸圆米。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,017評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽娄帖。三九已至也祠,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間近速,已是汗流浹背诈嘿。 一陣腳步聲響...
    開封第一講書人閱讀 33,142評論 1 272
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留削葱,地道東北人奖亚。 一個月前我還...
    沈念sama閱讀 48,388評論 3 373
  • 正文 我出身青樓,卻偏偏與公主長得像析砸,于是被迫代替她去往敵國和親昔字。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,066評論 2 355

推薦閱讀更多精彩內(nèi)容

  • 在你所有的JS代碼的最開始就用一個img把你要預(yù)加載的圖片的src存進(jìn)去首繁,這樣瀏覽器執(zhí)行JS的時候就會先去請求你的...
    勃王閱讀 410評論 0 0
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5李滴? 答:HTML5是最新的HTML標(biāo)準(zhǔn)。 注意:講述HT...
    kismetajun閱讀 27,489評論 1 45
  • 預(yù)加載圖片是提高用戶體驗的一個很好方法蛮瞄。圖片預(yù)先加載到瀏覽器中所坯,訪問者便可順利地在你的網(wǎng)站上沖浪,并享受到極快的加...
    站著瞌睡閱讀 2,057評論 0 0
  • 工廠模式類似于現(xiàn)實生活中的工廠可以產(chǎn)生大量相似的商品挂捅,去做同樣的事情芹助,實現(xiàn)同樣的效果;這時候需要使用工廠模式。簡單...
    舟漁行舟閱讀 7,771評論 2 17
  • 上帝給了我們一顆靈動的心 是想要我們能夠柔軟和溫情地活著闲先, 而不是無知無覺地白白虛度状土! 我們總要仰望星空, 總要欣...
    昊ge閱讀 131評論 0 0