圖片的預加載與懶加載

時間 2020-02-26

標籤圖片加載简体版

原文原文鏈接

圖片預加載與懶加載css

由名字能夠知道, 圖片的預加載->當用戶須要查看圖片能夠直接從本地緩存中取到(提早加載下來的), 圖片的懶加載->是當用戶一次性訪問的圖片數量比較多的時候,會減小請求的次數或者延遲請求,是一種服務器前端的優化
總結來講: 圖片的預加載在必定程度上增強了服務器的壓力, 圖片的懶加載在必定程度上減輕了服務器的壓力

預加載
就是在咱們須要使用到圖片資源的地方以前就先把這些圖片資源加載下來,這樣在咱們使用的地方就會直接從本地緩存中去取html

實現方式1 : 能夠直接在使用以前報因此資源加載下來這樣就會緩解當在須要使用的地方全部資源加載太慢而出現的反作用前端

//css
.image {
    width: 100vw;
    height: 100vh;
    background: url("https://sqimg.qq.com/qq_product_operations/im/pcqq/9.0/firstscreen_img/BG-1.jpg"),
      url("https://sqimg.qq.com/qq_product_operations/im/pcqq/9.0/firstscreen_img/BG-1_1.jpg"),
      url("https://sqimg.qq.com/qq_product_operations/im/pcqq/9.0/firstscreen_img/BG-2_1.jpg"),
      url("https://sqimg.qq.com/qq_product_operations/im/pcqq/9.0/firstscreen_img/BG-4_1.jpg"),
      url("https://sqimg.qq.com/qq_product_operations/im/pcqq/9.0/firstscreen_img/BG-5_1.jpg"),
      url("https://sqimg.qq.com/qq_product_operations/im/pcqq/9.0/firstscreen_img/BG-1_1.jpg");
    background-size: cover;
    opacity: 1;
    animation: bgmove 10s infinite;
    overflow: hidden;

實現方式2 : 可使用image 對象,每建立一個image對象的時候就給瀏覽器緩存了一張圖片,在須要使用的極速加載瀏覽器

//js
 <script>
        var arr = [
           "https://sqimg.qq.com/qq_product_operations/im/pcqq/9.0/firstscreen_img/BG-1_1.jpg",
           "https://sqimg.qq.com/qq_product_operations/im/pcqq/9.0/firstscreen_img/BG-2_1.jpg",
           "https://sqimg.qq.com/qq_product_operations/im/pcqq/9.0/firstscreen_img/BG-4_1.jpg",
           "https://sqimg.qq.com/qq_product_operations/im/pcqq/9.0/firstscreen_img/BG-5_1.jpg",
        ];

        var imgs = []
        preLoadImg(arr);

        //圖片預加載方法
        function preLoadImg(pars) {
            for (let i = 0; i < arr.length; i++) {
                imgs[i] = new Image();
                imgs[i].src = arr[i];
            }
        }
    </script>

補充一個小問題:當咱們建立 var imageobj = new image()image 對象,直接給對象src賦值,能夠追加到頁面圖片能夠顯示,可是當咱們打印image對象的寬高時顯示都是爲0的,那時由於即便圖片已經通過了預加載可是圖片的加載速度仍是會慢於html的加載速度,因此解決辦法就是使用onload方法,在圖片已經徹底加載完成以後再打印,這樣就能夠取到圖片的寬高了.

懶加載
自定義一個屬性存放img的真實地址,在img 的src屬性存放一個佔位的圖片地址(小圖或者是圖片加載的動圖),當img出如今瀏覽器的可視區域時再將真實的圖片地址賦值給img的src屬性,減輕服務器端的壓力緩存

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        img {
            margin-top: 1000px;
        }
    </style>
</head>
<body>
    <div class="container">
        <img id="img1" src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2167624966,4016886940&fm=26&gp=0.jpg"
            data-src="https://sqimg.qq.com/qq_product_operations/im/pcqq/9.0/firstscreen_img/BG-4_1.jpg" alt="">
    </div>
</body>
</html>
<script>
    var viewPortHeight = window.innerHeight;
    let $img1 = document.getElementById('img1');
    function viewport(el) {
        return el.offsetTop - document.documentElement.scrollTop+200 <= viewPortHeight;
    }
    window.onscroll = function(){
        //若是圖片出如今頁面的可視區域,就替換真實的圖片
        if(viewport($img1)){
            console.log('圖片出如今頁面中');
        //也能夠在這裏添加圖片加載的動畫
            $img1.src = $img1.getAttribute("data-src");
        }else{
            console.log('圖片沒有出現');
        }
    }
</script>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。