图片懒加载及异常处理

andot 发布于2019-08-23 17:56 / 491人阅读

摘要：设置防抖动，避免回调频繁执行，影响性能二图片加载错误处理有些时候，由于网络请求或是资源问题，导致图片资源请求失败，这时图片会展示为非常难看的效果破碎的图片。这时可以通过监听图片的时间来处理。

在日常页面开发中，常常会涉及到图片的展示。有时候当图片资源过多时，我们希望能将图片延迟加载，同时当图片加载失败后，能用一张默认图片去代替其进行展示。其效果如图所示：

一、图片懒加载

其实图片懒加载的核心思想很简单：

通过预先将图片的src资源指向一张小图片或空，并通过 data-src 来记录其实际图片地址。

通过延迟加载或监听滚动事件（图片出现在可视区域中），将 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 标签

大多数的时候，图片所处位置的宽高都是固定的。但是图片实际的宽高都是未知的，图片宽高的设置方式有：

直接将 img 的宽高设置为 img { width: 100%; height: 100%; }可能会出现图片严重失真。

通过设置最大宽高的方式 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);
};

完整示例代码：





    
    
    图片懒加载处理

五、图片优化

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

压缩图片，降低图片大小（智图：一个图片优化平台）

响应式请求图片资源（高清屏请求 @2x 图片，一般屏幕请求 @x 图片，控制图片尺寸，从而缩减图片大小）

减少图片 http 请求次数（雪碧图）

利用字体库代替图标（canvas 、svg 绘图替代图标）

具体细节说明可以参考： web前端优化之图片优化

idc机房托管私有云懒加载异常 js图片懒加载 js实现数据的懒加载图片懒加载

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/104398.html

Android优化总结

摘要：错误使用单利在开发中单例经常需要持有对象，如果持有的对象生命周期与单例生命周期更短时，或导致无法被释放回收，则有可能造成内存泄漏。如果集合是类型的话，那内存泄漏情况就会更为严重。目录介绍 1.OOM和崩溃优化 1.1 OOM优化 1.2 ANR优化 1.3 Crash优化 2.内存泄漏优化 2.0 动画资源未释放 2.1 错误使用单利 2.2 错误使用静态变量 2.3 ...

sunsmell 2019-08-19 11:45 评论0 收藏0
ViewPager懒加载极致优化

摘要：最后，当一次更新添加和或移除完成之后将会调用来通知提交关联和或取消关联的操作。懒加载的实现弊端概念当需要时才加载，加载之后一直保持该对象。而且为了实现滑动效果，都是预加载左右两侧的页面。预加载的预加载机制。目录介绍 01.ViewPager简单介绍 02.ViewPager弊端分析 03.ViewPager预加载 04.ViewPager部分源码 05.懒加载出现问题 06.如何实...

gotham 2019-08-16 18:41 评论0 收藏0
“瀑布流式”图片懒加载代码解析及优化(二)

摘要：之前写过一版图片懒加载的文章，刚好周末在整理文件的时候，大概又看了一遍之前写的代码发现有很多可以优化的地方。这篇文章主要就是结合上篇瀑布流式图片懒加载代码示例再来看看图片懒加载的一些知识。之前写过一版图片懒加载的文章，刚好周末在整理文件的时候，大概又看了一遍之前写的代码发现有很多可以优化的地方。这篇文章主要就是结合上篇《瀑布流式图片懒加载代码示例》再来看看图片懒加载的一些知识。图片...

appetizerio 2019-08-19 17:39 评论0 收藏0
函数节流和图片懒加载

摘要：然而，如果前一个定时器尚未执行，其实就是替换为一个新的定时器，目的是只有在执行函数的请求停止了一段时间后才执行。首先清除之前设置的任何定时器，定时器是储存在函数的属性中的。导读这篇文章中主要介绍一下函数节流，然后给了一个图片懒加载的例子，说图片懒加载的时候顺带提了下怎么使用JS获取页面的宽高，卷上去的长度等。参考来源主要是《JavaScript高级程序设计》。函数节流浏览器的D...

smallStone 2019-08-01 17:40 评论0 收藏0
函数节流和图片懒加载

摘要：然而，如果前一个定时器尚未执行，其实就是替换为一个新的定时器，目的是只有在执行函数的请求停止了一段时间后才执行。首先清除之前设置的任何定时器，定时器是储存在函数的属性中的。导读这篇文章中主要介绍一下函数节流，然后给了一个图片懒加载的例子，说图片懒加载的时候顺带提了下怎么使用JS获取页面的宽高，卷上去的长度等。参考来源主要是《JavaScript高级程序设计》。函数节流浏览器的D...

tomlingtm 2019-08-21 16:44 评论0 收藏0