前端页面图片加载失败显示默认图片

方法有多种：

1.首先说我用的，看代码

//页面图片加载失败时默认显示统一处理

document.addEventListener("error", function (e) {

var elem = e.target;

if (elem.tagName.toLowerCase() == "img") {

elem.src = "/image/General/errorDefault.png";

}

}, true);

这种写法的好处，可以监听到动态js添加进来的元素，有些人可能会用jq的事件代理delegate或者on（我没有实现，开始以为我代理的不对，后来知道是error事件不支持冒泡），最好先将默认图片预加载：

var imgObj = new Image();

imgObj.src = '默认路径';

如果默认图片也加载失败，会出现闪烁并且不断触发error方法，陷入死循环。

解决办法就是定义全局变量 num 每触发一次error num++，当num大于某一阀值的时候停止定义error = null；关闭监听，并且显示alt的内容，做到向下兼容。

2.普通的方法：

$("img").on("error", function () {$(this).attr("src", "../img/img.jpg");
});

不支持动态添加的元素。

而且也会陷入死循环

3.另一种是可以避免陷入死循环的

$("img").one("error", function(e){ $(this).attr("src", "default.gif");});

4.还有一种直接在html标签中添加：

<img src="/image.gif" onerror='this.src="default.gif" />

前端页面图片加载失败显示默认图片相关推荐

vue解决图片加载失败显示默认图片的方法
在项目中经常会遇到图片加载失败需要显示默认图片的场景,那么如何在图片src资源加载失败显示出默认的图片呢? 方法一:onerror <img src="原来要加载的资源" o ...
图片加载失败显示默认图片
在页面加载的图片的时候,如果图片不存在或者路径不存在,页面加载图片就会如下图所示. 解决方法: 在img 标签中添加一下标签 onerror="onerror=null;src='img/a ...
vue图片加载失败使用默认图片，el-image支持懒加载，自定义占位、加载失败等
<template><d2-container><h3>image加载失败使用默认图片</h3><img src=""alt= ...
img加载中显示loading，加载失败显示默认图片（React）
实现效果完整代码 import { useRef, useState } from 'react'; import './index.less'; import errorImg from '@/c ...
图片加载失败或默认图片
直接上马 $('img').each(function(k,i) {if($('img').eq(k).height()<200){if (!this.complete || typeof th ...
img标签图片加载失败显示图片
img标签图片加载失败显示图片 onerror="οnerrοr=null;src='../../image/community/initialize_img.png'"
img图片加载失败选择默认替换图片
一般我们需要加载图片的有两种: 1.img 标签直接通过src引用图片地址 img标签的话,可以通过img自带属性onerror 写一个js进行控制,当图片加载失败后触发onerror <img ...
htmlimg图片加载失败_js针对图片加载失败的处理方法分析
本文实例讲述了js针对图片加载失败的处理方法.分享给大家供大家参考,具体如下: 在项目中不可避免会用到图片,尤其是列表,有时候图片会加载失败:这样就会显示一个很难看的坏图片缩略图:下面介绍两种方法,解 ...
htmlimg图片加载失败_html网页图片未加载完成或失败时显示默认图片
前言一般一个内容多的网站相对会有比较多的图片文件,但是同时加载这些图片文件或加载失败时会出现空白占位,影响美观,通过脚本控制,可以实现加载需求内容图片时,加载未完成或失败的时候显示一张本地默认图片, ...

前端页面图片加载失败显示默认图片

前端页面图片加载失败显示默认图片相关推荐

最新文章

热门文章