操屁眼的视频在线免费看,日本在线综合一区二区,久久在线观看免费视频,欧美日韩精品久久综

實現圖片懶加載懶加載一、前言最近因為需要做一個小網站，但是呢，因為圖片比較多，打開網頁速度很慢，服務器壓力就會很大。不僅影響渲染速度還會浪費帶寬打開網頁沒有加載圖片，比如一個1M大小的圖片，并發情況下，達到1000并發，即同時有1000個人訪問，就會產生1個G的帶寬。于是就想到了圖片懶加載來減輕服務器的壓力，優先加載可視區域的內容，其他部分等進入了可視區域再加載，從而提高性能，可以大幅度的提高網頁加載速度，效果很明顯，于是想著將這個方...

大家好，我是架構君，一個會寫代碼吟詩的架構師。今天說一說實現圖片懶加載懶加載,希望能夠幫助大家進步!!!

一、前言

最近因為需要做一個小網站，但是呢，因為圖片比較多，打開網頁速度很慢，服務器壓力就會很大。不僅影響渲染速度還會浪費帶寬，比如一個1M大小的圖片，并發情況下，達到1000并發，即同時有1000個人訪問，就會產生1個G的帶寬。于是就想到了圖片懶加載來減輕服務器的壓力，優先加載可視區域的內容，其他部分等進入了可視區域再加載，從而提高性能，可以大幅度的提高網頁加載速度，效果很明顯，于是想著將這個方法記錄下來，方便以后或者有需要的人使用，方法和功能都是親測可用，請放心觀看。

二、原理

先將 img 標簽的 src 鏈接設為同一張圖片（一般是.gif圖片），然后給 img標簽 設置自定義屬性（ data-src）打開網頁沒有加載圖片，然后將真正的圖片地址存儲在 data-src 中，當JS監聽到該圖片元素進入可視窗口時，將自定義屬性中的地址存儲到src屬性中。達到懶加載的效果。這樣做能防止頁面一次性向服務器發送大量請求，導致服務器響應面，頁面卡頓崩潰等。

三、實現

網頁.gif 素材 ：

  <a  href="javascript：;" class="img" rel="nofollow" >
       <img src="/static/images/utils/loading.gif" th:data-src="${goodList.goodsImg}">

  </a>

只聽到從架構師辦公室傳來架構君的聲音:

人間一葉梧桐飄，蓐收行秋回斗杓。有誰來對上聯或下聯?

Js實現原理

此代碼由Java架構師必看網-架構君整理
<script>
    // 一開始沒有滾動的時候，出現在視窗中的圖片也會加載
    start();
    // 當頁面開始滾動的時候，遍歷圖片，如果圖片出現在視窗中，就加載圖片

    var clock; //函數節流
    $(window).on('scroll',function(){ 
   
        if(clock){ 
   
            clearTimeout(clock);
        }
        clock = setTimeout(function(){ 
   
            start()
        },200)

    })
    function start(){ 
   
        $('.img img').not('[data-isLoading]').each(function () { 
   
            if (isShow($(this))) { 
   
                loadImg($(this));
            }
        })

    }
    // 判斷圖片是否出現在視窗的函數
    function isShow($node){ 
   
        return $node.offset().top <= $(window).height()+$(window).scrollTop();
    }
    // 加載圖片的函數，就是把自定義屬性data-src 存儲的真正的圖片地址，賦值給src
    function loadImg($img){ 

   
        $img.attr('src', $img.attr('data-src'));
        // 已經加載的圖片，我給它設置一個屬性，值為1，作為標識
        // 弄這個的初衷是因為，每次滾動的時候，所有的圖片都會遍歷一遍，這樣有點浪費，所以做個標識，滾動的時候只遍歷哪些還沒有加載的圖片
        $img.attr('data-isLoading',1);
    }
</script>

四、效果展示