javascript - web网站一般怎么处理图片容错的问题?
PHPz
PHPz 2017-04-11 11:00:13
0
4
228

在网站中,经常会遇到图片加载失败出现图片加载失败的默认演示

为了防止这种情况的出现,通常在图片加载失败的时候会显示一张默认的图片,那么大家一般都是怎么解决这种情况,用的什么方法,拿出来分享下,
我只知道一种就是下面这种

<img src="error.jpg" alt="" onerror="this.src='defatule.jpg'" />
PHPz
PHPz

学习是最好的投资!

reply all(4)
小葫芦

img标签当图片不存在时将触发onerror事件,提供几个方案。
1.常规写法

// js
function imgError(image) {
    image.onerror = "";
    image.src = "/images/noimage.gif";
    return true;
}
// html
<img src="image.png" onerror="imgError(this);"/>

2.内联式:

<img src="image.png" onerror="this.onerror=null;this.src='/images/noimage.gif';" />

3:使用jQuery:

$("img").error(function () {
  $(this).unbind("error").attr("src", "broken.gif");
});
黄舟

http://orangexc.xyz/2016/05/2...

望采纳

Peter_Zhu

其实无非就是两种情况, 跨域和不跨域.

  1. 跨域, 请求的img失败, 没有显示. 显示本地默认的一个图 在onerror中处理

  2. 同域, 同域如果目的图片加载不出, errorImg估计也加载不出.当然排除低级错误

也可以js 去预先判断不稳定的服务器下的图片.

function addImg(isrc)
    {
        var Img = new Image();
        Img.src = isrc;
        Img.onload = function ()
        {
              document.body.appendChild(Img);
        }
        Img.onerror = function ()
        {
              console.log("error");
        }
    }
大家讲道理

那如果是网速慢 加载慢了 那不就出错了

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template