關于圖片預加載的思考

番茄西紅柿發布于2019-04-23 13:30 / 1481人閱讀

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

引子：

很多時候，我們在寫html頁面的時候，當需要在頁面中加入圖片時，我們很自然地把圖片直接用標簽放在了里面，這本來是沒有多大問題的。

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

為了解決這個性能問題，有一個比較好的解決問題就是用js去延遲圖片預加載。那么具體的實現過程是怎樣的呢？

我先把我實現的代碼放在下面：

<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]);

        });

});

這個案例我是要實現通過點擊按鈕實現圖片的展示過程。顯然，我在

盒子的標簽里面只是放了一張圖片（避免頁面打開是什么也沒有），并沒有把全部可以展示的圖片都放在盒子里面。因為這樣勢必會加大web瀏覽器解析html頁面的壓力。

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

這樣的實現，就比較有利于減輕html頁面解析過程中對瀏覽器解析器的壓力。

GPU云服務器云服務器圖片預加載 JS圖片預加載 js實現圖片預加載預加載

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/1962.html

【譯】使用Mobify.js讓你的圖片自動響應化

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

lncwwn 2019-08-19 14:27 評論0 收藏0
前端性能優化

摘要：端優談談關于前端的緩存的問題我們都知道對頁面進行緩存能夠有利于減少請求發送，從而達到對頁面的優化。而作為一名有追求的前端，勢必要力所能及地優化我們前端頁面的性能。這種方式主要解決了淺談前端中的過早優化問題過早優化是萬惡之源。優化向：單頁應用多路由預渲染指南 Ajax 技術的出現，讓我們的 Web 應用能夠在不刷新的狀態下顯示不同頁面的內容，這就是單頁應用。在一個單頁應用中，往往只有一...

Dean 2019-08-21 18:19 評論0 收藏0
Weex——關于移動端動態性的思考、實現和未來

摘要：什么是動態性今天在移動端，尤其是像手機淘寶這樣的中，動態性問題逐漸成為一個比較棘手的問題。在云端實現了天貓前端運營發布系統斑馬的對接，在前端開發實現了主會場的界面模塊和業務邏輯處理，同時在客戶端上對接了手機天貓手機淘寶。什么是動態性今天在移動端，尤其是像手機淘寶這樣的 App 中，動態性問題逐漸成為一個比較棘手的問題。所謂動態性，就是把移動應用本身的靈活性、迭代更新的周期和成本優化...

heartFollower 2019-08-01 15:03 評論0 收藏0
前端的性能優化（針對內容方面）

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

coordinate35 2019-08-02 16:13 評論0 收藏0