我们浏览网页的时候,经常碰到图片加载失败的问题,例如图片链接不存在或网络加载不顺畅等原因,导致完整的图片无法显示出来。那么我们有什么办法来解决这个问题吗?

使用图片外链

我们在网站上使用图片的时候,为了快速网页的加载速度,在服务器带宽有限的情况下,一般不会使用本服务器上的图片,而会使用一些托管服务。例如,使用对象存储来放一些图片文件,或者使用一些图床服务。

但是如果遇到了一些网络错误,或者图片服务提供商的错误, 或者图片服务商更改了使用许可从而禁止图片外链等(例如 gitee),都会导致我们的图片挂掉。我们需要一些备份方法。

1.使用 onerror 双路方法

Mozilla 开发文档提到了一个 onerror 事件,当图片无法加载或者加载错误的时候就会被调用。那么我们就可以这样写:

<img src="a.jpg" onError="this.src='b.jpg'; this.onerror=null;" />

onerror 方法里一般都会带 this.onerror = null;,这是为了防止 onerror 方法造成的死循环导致内存溢出。假如正常图片加载失败,那么 src 会换成 onerror 默认的 url,如果 onerror 默认的 url 也加载失败,则又会加载它,从而死循环。添加 this.onerror = null; 就是为了达到只执行一次的目的。

onerror 方法的优点是无需添加额外的标签。而缺点是 onerror 默认的 url 加载失败时,破裂图仍旧存在。

2.拓展 onerror 思路

有时候,我们的图片加载过程受到网络不畅的影响,会导致图片撕裂,加载不完全等。我们可以利用 onerror 方法更改 img 的样式为 display:none;,让加载失败的 img 标签本身不可见。

<div id='test1'></div>

<script>
    $(function () {
        function loadImgs() {
            var html1 = '';
            html2 += '<div class="img"><img src="img/a.jpg" alt="" onerror="this.onerror=\'\';this.style.display=\'none\'"></div>';
            html2 += '<div class="img"><img src="img/b.jpg" alt="" onerror="this.onerror=\'\';this.style.display=\'none\'"></div>';
            $('#test1').append(html1);
        }
        loadImgs();
    });
</script>

这样就解决了图片撕裂的问题,但是缺点也肯明显,需添加额外的标签,并需要 JavaScript 控制。

转换下思路,我们可以先让 img 不可见,再利用 onload 方法更改 img 的样式为 display:inline-block;,让加载成功的 img 标签显示。

<div class="type2" id='test2'></div>

<script>
    $(function () {
        function loadImgs() {
            var html2 = '';
            html3 += '<div class="img"><img src="img/a.jpg" alt="" onload="this.style.display=\'inline-block\'"></div>';
            html3 += '<div class="img"><img src="img/b.jpg" alt="" onload="this.style.display=\'inline-block\'"></div>';
            $('#test2').append(html2);
        }
        loadImgs();
    });
</script>

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

Next Post

使用Hexo搭建博客并通过Actions部署到GitHub Page

周二 10 月 11 , 2022
相信很多小伙伴们都在使用 Hexo + Githu […]