图片懒加载及非常处置惩罚

2019年9月1日 185次阅读 来源: 找大海的nimo

在一样平常页面开辟中，常常会涉及到图片的展现。有时刻当图片资本过多时，我们愿望能将图片耽误加载，同时当图片加载失利后，能用一张默许图片去替换其举行展现。其结果如图所示：

《图片懒加载及非常处置惩罚》

一、图片懒加载

实在图片懒加载的中心头脑很简单：

  1. 经由过程预先将图片的src资本指向一张小图片或空，并经由过程 data-src 来纪录实在际图片地点。
  2. 经由过程耽误加载或监听转动事宜（图片涌现在可视区域中）， 将 data-src 属性值赋值给 src 完成图片的懒加载。
setTimeout({
    $imgs.each(function () {
        var $img = $(this);
        $img.src = $img.attr('data-src');
    });  
}, 0);

// 设置 500ms 防抖动，防止回调频仍实行，影响机能
$(window).on('scroll', _.debounce(function () {
    var $window = $(window); 
    var top = parseInt($window.height()) + parseInt($window.scrollTop());
    $imgs.each(function () {
        var $img = $(this);
        var oSrc = $img.attr('data-src');
        if (!oSrc) return;
        if ($img.offset().top < top) {
            $img.src = oSrc;
            $img.attr('data-src', '');
        }
}, 500));

二、图片加载错误处置惩罚

有些时刻，因为收集要求或是资本题目，致使图片资本要求失利，这时候图片会展现为异常丢脸的结果（破裂的图片）。这时候可以经由过程监听图片的 onerror 时候来处置惩罚。

$img.onerror = function () {
    $img.src = 'default.jpg';
}

为了防止默许图片也加载失利时，图片资本无穷实行的状况，可以应用 jQuery 的 one() api 接口绑定一个一次性的 onerror 事宜。

$img.one('error', function () {
    $img.src = 'default.jpg';
});

tip: 在加载图片时，我们可以应用建立一个不在 衬着树 中的 Img 元夙来加载图片资本。

var oSrc = $img.attr('data-src');
var img = document.createElement('img');
img.onload = function () {
    $img.src = oSrc;
};
img.onerror = function () {
    console.debug('图片加载失利:', img.src);
    // 此时 $img src 依旧为默许图，假如图片是不是替换推断不为 data-src ，可不举行清空
    $img.attr('data-src', '');
};
img.src = oSrc;

三、应用 background-size 属性替换 img 标签

大多数的时刻，图片所处位置的宽高都是牢固的。然则图片现实的宽高都是未知的，图片宽高的设置体式格局有：

  1. 直接将 img 的宽高设置为 img { width: 100%; height: 100%; }可能会涌现图片严峻失真。
  2. 经由过程设置最大宽高的体式格局 img { max-width: 100%; max-height: 100%; } 会涌现高低或摆布的留白，同时当资本图片宽高小于容器时，留白更多。

background-size: cover; 可以对图片最大水平的应用，不存在留白和图片失真的题目。不过该体式格局会存在图片资本的丧失（图片不能完全展现）。

.img {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

四、应用 Vue 完成一个图片处置惩罚指令

export default function (el, binding) {
    setTimeout(() => {
        const img = document.createElement('img');
        img.onload = function () {
            el.style.backgroundImage = `url(${binding.value})`;
        };
        img.onerror = function () {
            console.debug('图片加载失利:', img.src);
        };
        img.src = binding.value;
    }, 0);
};

完全示例代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
    <title>图片懒加载处置惩罚</title>
    <style>
        .img-group {
            display: flex;
            width: 800px;
            flex-wrap: wrap;
            list-style-type: none;
        }
        .img-item {
            flex: 0 0 33.3%;
            height: 100px;
            background-color: aquamarine;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
        }
        .img-item:nth-child(odd) {
            background-color: chocolate;
        }
    </style>
</head>

<body>
    <div id="app"></div>

    <template id="tpl">
        <ul class="img-group">
            <li class="img-item" v-for="img in imgs" v-img=" img"></li>
        </ul>
    </template>

    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
    new Vue({
        el: '#app',
        template: '#tpl',
        data() {
            return {
                imgs: [
                    'http://inews.gtimg.com/newsapp_match/0/9167593089/0',
                    'http://inews.gtimg.com/newsapp_match/0/9167593090/0',
                    'http://inews.gtimg.com/newsapp_match/0/9167593092/0',
                    'http://inews.gtimg.com/newsapp_match/0/9167593093/0',
                    'http://inews.gtimg.com/newsapp_match/0/9167593095/0',
                    'http://inews.gtimg.com/newsapp_match/0/9167595616/0',
                    'http://inews.gtimg.com/newsapp_match/0/9167595617/0',
                    'http://inews.gtimg.com/newsapp_match/0/9167595618/0',
                    'http://inews.gtimg.com/newsapp_match/0/9167595619/0'
                ],
            };
        },
        directives: {
            img(el, binding) {
                setTimeout(() => {
                    const img = document.createElement('img');
                    img.onload = function() {
                        el.style.backgroundImage = `url(${binding.value})`;
                    };
                    img.onerror = function() {
                        console.debug('图片加载失利:', img.src);
                    };
                    img.src = binding.value;
                }, 0);
            },
        },
    });
    </script>
</body>

</html>

五、图片优化

假如是前端资本图片的话，还可以做图片做一些其他优化：

  • 紧缩图片，下降图片大小 （智图：一个图片优化平台）
  • 相应式要求图片资本（高清屏要求 @2x 图片 ， 平常屏幕 要求 @x 图片，掌握图片尺寸，从而缩减图片大小）
  • 削减图片 http 要求次数（雪碧图）
  • 应用字体库替换图标 （canvas 、svg 画图替换图标）

详细细节申明可以参考： web前端优化之图片优化

    原文作者：找大海的nimo
    原文地址: https://segmentfault.com/a/1190000019377624
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞