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

資訊專欄INFORMATION COLUMN

圖片預(yù)加載，圖片懶加載，和jsonp中的一個(gè)疑問

eccozhou / 431人閱讀

摘要：之前一直以為圖片預(yù)加載，圖片懶加載是差不多的。下面說一下區(qū)別和突然想到的一個(gè)問題。利用圖片預(yù)加載將下一張圖片提現(xiàn)緩存下來。如果用戶滑動(dòng)到下面，則下面的圖片才會(huì)加載出來，否則不會(huì)加載該圖片。

之前一直以為圖片預(yù)加載，圖片懶加載是差不多的。其實(shí)差很多，出發(fā)點(diǎn)就不一樣。。。。。下面說一下區(qū)別和突然想到的一個(gè)問題。
圖片預(yù)加載：事先把圖片就下載下來，當(dāng)下次頁面中需要用到這個(gè)圖片的時(shí)候，就直接去讀取緩存的圖片
具體應(yīng)用場景：一個(gè)輪播圖，每次點(diǎn)擊屏幕出現(xiàn)下一張圖片，如果網(wǎng)速不大好的情況下，可能會(huì)加載的比較慢。所以會(huì)出現(xiàn)屏幕卡頓，白屏等情況。利用圖片預(yù)加載將下一張圖片提現(xiàn)緩存下來。這樣點(diǎn)擊下一張的時(shí)候就會(huì)讀取緩存的圖片，而不是發(fā)起一個(gè)新的http請求了。
原理

使用javascript中的 new Image() 創(chuàng)建image對象

給這個(gè)image對象的src屬性賦值，賦值的同時(shí)瀏覽器就會(huì)請求該圖片資源。

當(dāng)點(diǎn)擊出先下一張時(shí)，如果下一張的src和剛剛的image對象的src值相同，就會(huì)去讀取緩存。所以更加流暢了。

圖片懶加載：當(dāng)用戶需要看到這一部分內(nèi)容的時(shí)候才加載圖片
具體應(yīng)用場景舉例：例如淘寶天貓等商品圖片特別多，第一次打開頁面的時(shí)候不可能把所有商品圖片都加載出來，那樣頁面首屏?xí)貏e慢。于是首先只加載用戶能看見的那一部分圖片。如果用戶滑動(dòng)到下面，則下面的圖片才會(huì)加載出來，否則不會(huì)加載該圖片。這樣省流量，并且首屏加載比較快。
原理：

所有的img都自定義一個(gè)data-src屬性，名字可以隨便取。這個(gè)屬性放著該圖片的地址，而且不給img添加src屬性。因?yàn)樘砑恿藄rc屬性即使為空，還是會(huì)有請求的。

當(dāng)滑動(dòng)到用戶可以看見的部分之后，將img的data-src屬性值賦值給img的src屬性，這時(shí)候img才會(huì)去加載圖片資源。

疑問：
上面的圖片預(yù)加載中的new 出來的image直接賦值src屬性就能夠加載資源了，可是在jsonp中為什么還要把script標(biāo)簽append到頁面中才會(huì)發(fā)起請求呢？在js中創(chuàng)建的script直接賦值src屬性能不能立即發(fā)起請求？測試咯！

通過上面的測試，我們發(fā)現(xiàn)了使用document.createElement("script")創(chuàng)建出來的script標(biāo)簽給其src賦值之后并沒有立即加載資源。而是等到添加到頁面中才加載資源。 WHY？

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

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

相關(guān)文章

  • 圖片預(yù)加載，圖片懶加載，和jsonp中的一個(gè)疑問

    摘要：之前一直以為圖片預(yù)加載，圖片懶加載是差不多的。下面說一下區(qū)別和突然想到的一個(gè)問題。利用圖片預(yù)加載將下一張圖片提現(xiàn)緩存下來。如果用戶滑動(dòng)到下面，則下面的圖片才會(huì)加載出來，否則不會(huì)加載該圖片。 之前一直以為圖片預(yù)加載，圖片懶加載是差不多的。其實(shí)差很多，出發(fā)點(diǎn)就不一樣。。。。。下面說一下區(qū)別和突然想到的一個(gè)問題。圖片預(yù)加載：事先把圖片就下載下來，當(dāng)下次頁面中需要用到這個(gè)圖片的時(shí)候，就直接去讀...

    AlphaGooo 評論0 收藏0

  • 圖片的預(yù)加載和懶加載

    摘要：圖片的預(yù)加載是提升用戶體驗(yàn)而損失性能的一種做法，而懶加載的性能就比較好了，所以將兩個(gè)結(jié)合起來放到程序中是一種不錯(cuò)的選擇。 最近在做H5滑頁時(shí)，遇到一些比較大的場景，動(dòng)輒二十、三十頁，而圖片更是可恨的能達(dá)到上百個(gè)，所以就會(huì)導(dǎo)致場景在加載的時(shí)候遇到網(wǎng)速比較慢的時(shí)候，用戶等待的時(shí)間特別長，這樣的話，就有可能導(dǎo)致一部分的用戶沒有耐心，而丟失這部分用戶，于是就有了這里的圖片的預(yù)加載和懶加載，記個(gè)...

    SwordFly 評論0 收藏0

  • 懶加載和預(yù)加載

    摘要：使用默認(rèn)是對象，如果是是指使用標(biāo)簽，可以跨域，三懶加載和預(yù)加載的對比兩者都是提高頁面性能有效的辦法，兩者主要區(qū)別是一個(gè)是提前加載，一個(gè)是遲緩甚至不加載。懶加載對服務(wù)器前端有一定的緩解壓力作用，預(yù)加載則會(huì)增加服務(wù)器前端壓力。 一、懶加載 1.什么是懶加載 showImg(https://segmentfault.com/img/remote/1460000016666819); 懶加載也...

    appetizerio 評論0 收藏0

  • 懶加載和預(yù)加載

    摘要：使用默認(rèn)是對象，如果是是指使用標(biāo)簽，可以跨域，三懶加載和預(yù)加載的對比兩者都是提高頁面性能有效的辦法，兩者主要區(qū)別是一個(gè)是提前加載，一個(gè)是遲緩甚至不加載。懶加載對服務(wù)器前端有一定的緩解壓力作用，預(yù)加載則會(huì)增加服務(wù)器前端壓力。 一、懶加載 1.什么是懶加載 showImg(https://segmentfault.com/img/remote/1460000016666819); 懶加載也...

    Shonim 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<