国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專(zhuān)欄INFORMATION COLUMN

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

番茄西紅柿 / 1471人閱讀

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

引子：

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

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

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

我先把我實(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)通過(guò)點(diǎn)擊按鈕實(shí)現(xiàn)圖片的展示過(guò)程。顯然，我在

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

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

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

 

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

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

相關(guān)文章

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

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

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

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

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

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

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

    摘要：什么是動(dòng)態(tài)性今天在移動(dòng)端，尤其是像手機(jī)淘寶這樣的中，動(dòng)態(tài)性問(wèn)題逐漸成為一個(gè)比較棘手的問(wèn)題。在云端實(shí)現(xiàn)了天貓前端運(yùn)營(yíng)發(fā)布系統(tǒng)斑馬的對(duì)接，在前端開(kāi)發(fā)實(shí)現(xiàn)了主會(huì)場(chǎng)的界面模塊和業(yè)務(wù)邏輯處理，同時(shí)在客戶(hù)端上對(duì)接了手機(jī)天貓手機(jī)淘寶。 什么是動(dòng)態(tài)性 今天在移動(dòng)端，尤其是像手機(jī)淘寶這樣的 App 中，動(dòng)態(tài)性問(wèn)題逐漸成為一個(gè)比較棘手的問(wèn)題。所謂動(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%的終端用戶(hù)響應(yīng)時(shí)間都花在了前端上，其中大部分時(shí)間都在下載頁(yè)面上的各種組件：圖片，樣式表，腳本，...

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

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

0條評(píng)論

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