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

資訊專欄INFORMATION COLUMN

關(guān)于圖片預(yù)加載的思考

番茄西紅柿 / 1483人閱讀

摘要：為了解決這個(gè)性能問題，有一個(gè)比較好的解決問題就是用去延遲圖片預(yù)加載。

引子：

很多時(shí)候，我們?cè)趯慼tml頁面的時(shí)候，當(dāng)需要在頁面中加入圖片時(shí)，我們很自然地把圖片直接用標(biāo)簽放在了里面，這本來是沒有多大問題的。

但是當(dāng)圖片數(shù)量很多的時(shí)候，問題就來了。Html頁面在被解析器解析的時(shí)候要不斷去尋找圖片的路徑去加載圖片，而這些圖片不一定所以都會(huì)被用戶通過觸發(fā)一些類似點(diǎn)擊的操作所看到。這樣，一些不必要的圖片預(yù)加載就會(huì)拉長了頁面的加載時(shí)間，帶來的用戶體驗(yàn)是不好的。

為了解決這個(gè)性能問題，有一個(gè)比較好的解決問題就是用js去延遲圖片預(yù)加載。那么具體的實(shí)現(xiàn)過程是怎樣的呢？

我先把我實(shí)現(xiàn)的代碼放在下面：

<html lang="en">
<head>
         <meta charset="UTF-8">
         <title>Documenttitle>
<style>
  body{position:relative;text-decoration: none;list-style: none;}

  .showpic{position:absolute;height:550px;width:90%;margin-left:80px;background-color: black;}

  .button-box{position: absolute;margin-top:560px;margin-left: 600px;z-index: 5;}

  .preload{position: fixed;height: 100%;width:100%;top:0;background-color: white;display: none;}

  img{position: absolute;margin-left: 30px;margin-top: 3px;}

  button{height: 30px;width:80px;font-size: 10px;}
style>
<script  src="https://code.jquery.com/jquery-1.12.4.js">script>
head>

<body>
         <div class="showpic">
                  <img src="img/pexels-photo-297814.jpeg" id="img">
         div>

         <div class="button-box">
                   <button type="button" value="前一張"  data-control="prev" class="button">前一張button>
                   <button type="button" value="后一張"  data-control="next" class="button">后一張button>
         div>
         <div class="preload">div>

<script type="text/javascript" src="js/preload.js">script>
body>
html>


$(document).ready(function(){

         var imgs = ["img/pexels-photo-297814.jpeg",
                                     "img/pexels-photo-465445.jpeg",
                                     "img/pexels-photo-619948.jpeg",
                                     "img/pexels-photo-620336.jpeg",
                                     "img/pexels-photo-885746.jpeg",
                                     "img/pexels-photo-886109.jpeg",
                                     "img/pexels-photo-888994.jpeg"];

         var  index = 0,
         len =imgs.length;

        $(".button").on("click",function(){

                 if($(this).data(control)=== "prev"){
                           index = Math.max(0,--index);
                 }else{
                           index = Math.min(len-1,++index);
                 }

                 $("#img").attr("src",imgs[index]);

        });

});

 

 

 

 

這個(gè)案例我是要實(shí)現(xiàn)通過點(diǎn)擊按鈕實(shí)現(xiàn)圖片的展示過程。顯然，我在

盒子的標(biāo)簽里面只是放了一張圖片（避免頁面打開是什么也沒有），并沒有把全部可以展示的圖片都放在盒子里面。因?yàn)檫@樣勢必會(huì)加大web瀏覽器解析html頁面的壓力。

我把這些圖片的所有搜索路徑的放在了js代碼中，并通過修改src屬性的方法來更新標(biāo)簽，其中我還用到了html的data屬性來自定義點(diǎn)擊按鈕的類型，并通過在js中獲取這個(gè)data值來確定圖片路徑的更改。

這樣的實(shí)現(xiàn)，就比較有利于減輕html頁面解析過程中對(duì)瀏覽器解析器的壓力。

 

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

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

相關(guān)文章

  • 【譯】使用Mobify.js讓你的圖片自動(dòng)響應(yīng)化

    摘要：的圖像提供了該方案。使用的圖像和捕獲技術(shù)相結(jié)合我們能通過一個(gè)標(biāo)簽實(shí)現(xiàn)圖像的自動(dòng)響應(yīng)化。調(diào)整元素當(dāng)然不同的瀏覽器自動(dòng)化調(diào)整圖片大小是可行的而自動(dòng)化的確實(shí)不可能。 在Web開發(fā)社區(qū)，響應(yīng)式圖片已經(jīng)成為最大的挫敗之一。原因也很簡單：頁面平均大小產(chǎn)品能從去年的1MB達(dá)到了驚人的1.5MB。其中圖片大小的增長比例就占了頁面大小增長的60%或更多，并且這個(gè)比例還在不斷攀升。 絕大多數(shù)的頁面是可以...

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

  • 前端性能優(yōu)化

    摘要：端優(yōu)談?wù)勱P(guān)于前端的緩存的問題我們都知道對(duì)頁面進(jìn)行緩存能夠有利于減少請(qǐng)求發(fā)送，從而達(dá)到對(duì)頁面的優(yōu)化。而作為一名有追求的前端，勢必要力所能及地優(yōu)化我們前端頁面的性能。這種方式主要解決了淺談前端中的過早優(yōu)化問題過早優(yōu)化是萬惡之源。 優(yōu)化向：單頁應(yīng)用多路由預(yù)渲染指南 Ajax 技術(shù)的出現(xiàn)，讓我們的 Web 應(yīng)用能夠在不刷新的狀態(tài)下顯示不同頁面的內(nèi)容，這就是單頁應(yīng)用。在一個(gè)單頁應(yīng)用中，往往只有一...

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

  • Weex——關(guān)于移動(dòng)端動(dòng)態(tài)性的思考、實(shí)現(xiàn)和未來

    摘要：什么是動(dòng)態(tài)性今天在移動(dòng)端，尤其是像手機(jī)淘寶這樣的中，動(dòng)態(tài)性問題逐漸成為一個(gè)比較棘手的問題。在云端實(shí)現(xiàn)了天貓前端運(yùn)營發(fā)布系統(tǒng)斑馬的對(duì)接，在前端開發(fā)實(shí)現(xiàn)了主會(huì)場的界面模塊和業(yè)務(wù)邏輯處理，同時(shí)在客戶端上對(duì)接了手機(jī)天貓手機(jī)淘寶。 什么是動(dòng)態(tài)性 今天在移動(dòng)端，尤其是像手機(jī)淘寶這樣的 App 中，動(dòng)態(tài)性問題逐漸成為一個(gè)比較棘手的問題。所謂動(dòng)態(tài)性，就是把移動(dòng)應(yīng)用本身的靈活性、迭代更新的周期和成本優(yōu)化...

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

  • 前端的性能優(yōu)化（針對(duì)內(nèi)容方面）

    摘要：避免重定向重定向用和狀態(tài)碼，下面是一個(gè)有狀態(tài)碼的頭瀏覽器會(huì)自動(dòng)跳轉(zhuǎn)到域指明的。除此之外還有別的跳轉(zhuǎn)方式元標(biāo)簽和，但如果你必須得做重定向，最好用標(biāo)準(zhǔn)的狀態(tài)碼，主要是為了讓返回按鈕能正常使用。要提高性能，優(yōu)化這些響應(yīng)至關(guān)重要。 性能優(yōu)化 減少Http請(qǐng)求: 1.盡量減少HTTP請(qǐng)求數(shù) 　　80%的終端用戶響應(yīng)時(shí)間都花在了前端上，其中大部分時(shí)間都在下載頁面上的各種組件：圖片，樣式表，腳本，...

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

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

0條評(píng)論

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