有时候, 当img的src加载失败, 会显示缺省碎片图片,  影响用户体验。  有一个js事件onerror就派上了用场。 它可以在加载失败时, 显示缺省的图片。

它有两种使用方式。

第一种: 使用纯标签写法。 这样会增大网页的体积。  但是客户端解析速度要快点。 

<img src="https://www.88tv.org/upload/vod/20190829-1/db8b269c40172799f215aba93f03a03d.jpg" onerror="javascript:this.src='https://t.8kmm.com/upload/vod/20190829-1/db8b269c40172799f215aba93f03a03d.jpg';">

第二种:使用Jquery JS, 全站如果有规律, 可以使用此种方式。  在所需页面插入下面这段js就行了。 

<script>
$(document).ready(function(){
$('.stui-vodlist img').each(function(){ //我这里仅仅是遍历vodlist这个元素下面的内容。
var error = false;
if (!this.complete) {
error = true;
} if (typeof this.naturalWidth != "undefined" && this.naturalWidth == 0) {
error = true;
} if(error){
$(this).bind('error.replaceSrc',function(){
this.src = this.src.replace("www.88tv.org","t.8kmm.com"); //注意这一句, 因为这里是有规律的, 所有我可以这样写,如果有不同, 这里需要定制。 $(this).unbind('error.replaceSrc');
}).trigger('load');
}
});
});
</script>

结尾:

如果碰到onerror过去的图片也没有, 可能会造成循环请求, 这样的话, 就需要对这段升级。

可以使用, 去检查图片是否存在,

var imgUrl = "https://t.8kmm.com/upload/vod/20191006-16/d9823993b55e8cb504cf174c7bd9db12.jpg";
var img = new Image();
img.src=imgUrl;
//判断图片大小是否大于0 或者 图片高度与宽度都大于0
if(img.filesize>0||(img.width>0&&img.height>0)){
e.src = imgUrl;
}else{
//默认图片也不存在的时候
e.src="/img/default.jpg";
}

当然, 也可以使用XMLHTTP远程判断图片是否存在。再根据远程获取的是404还是200来更换图片SRC。

img error 图片加载失败的最佳方案的更多相关文章

  1. <img> 标签 图片加载失败时候处理方案

    应用场景 在开发中,经常遇到一种情况,数据库不存在图片地址,或者存在图片地址,但图片已经被删除,这个时候会出现加载失败情况.提供以下解决方案 解决方案 在 img 标签 加上onerror=" ...

  2. AngularJS中如果ng-src 图片加载失败怎么办

    我们知道AngularJS加载图片的方法是用技术分享加ng-src标签,例如: <img ng-src="{{currentUrl}}"/> 其中currentUrl为 ...

  3. js 图片加载失败处理方法

    在项目中不可避免会用到图片,尤其是列表,有时候图片会加载失败:这样就会显示一个很难看的坏图片缩略图:下面介绍两种方法,解决这个问题: 1.如果在你的项目中有引入jQuery插件,你可以使用error( ...

  4. angular 图片加载失败 情况处理? 如何在ionic中加载本地图片 ?

    1.angular 图片加载失败 情况处理 在directive中定义组件,在ng-src错误时,调用err-src app.directive('errSrc',function(){ return ...

  5. 伪元素黑魔法:一个替代onerror解决图片加载失败的方案

    问题的引出是这样的,在一个项目中有大量的页面主体是table做数据展示,所以就封装了一个table的组件,提供动态渲染的方案.有个问题是数据类型中有图片,对于图片的加载失败我们需要做容错.一般我们的思 ...

  6. 当h5页面图片加载失败后,给定一个默认图

    本文主要讨论页面中图片加载失败后替换默认图片的几种方式 重点来了:一定要记住error事件不冒泡. 相关的知识点:jquery的ready方法.$("img").error().i ...

  7. css背景图片加载失败,页面部分图标无法显示

    1.问题表现:首屏缺失部分图标.点击按钮切换为激活状态时,部分按钮的激活态图标无法显示. 2.问题原因:网络极差,断断续续,点击时添加class:active变为激活态, active.png这张图片 ...

  8. 当图片加载失败时更换图片, Firefox onerror 报错

    当图片加载失败时更换图片. <!DOCTYPE html> <meta charset="UTF-8"> <img src="http:// ...

  9. WebForm、MVC图片加载失败处理

    还是那个该死的WebFrom项目,部分功能替换为MVC后感觉好多了,但是WebForm.MVC都有图片加载失败时显示提示图片的需求,并且统一在js中处理.问题来了,js中图片路径怎么处理呢?现场有可能 ...

随机推荐

  1. shell 练习题1

    1.实现每次打开一个xx.sh时,自动添加注释信息 [root@chengyinwu ~]# cat .vimrc set ignorecase set nu set autoindent autoc ...

  2. uni-app条件编译:#ifdef #ifndef #endif

    语法: // #ifdef %PLATFORM% 这些代码只在该平台编译 // #endif #ifdef :      if defined  仅在某个平台编译 #ifndef :     if n ...

  3. 面试题-JavaScript交换两个变量的方法

    在平时的业务开发或者面试过程中,经常会遇到交换两个变量这种问题,于是,个人总结以下几种交换变量的方法: 1.方案一 使用一个临时变量来交换  2.方案二 使用ES6解构赋值语法来交换 3.方案三利用数 ...

  4. 2019年上半年收集到的人工智能LSTM干货文章

    2019年上半年收集到的人工智能LSTM干货文章 门控神经网络:LSTM 和 GRU 简要说明 LSTM-CNN-Attention算法系列之一:LSTM提取时间特征 对时间序列分类的LSTM全卷积网 ...

  5. CarTool 使用,获取图片资源

    程序:gitHub: 项目地址 使用方法: 1.拿到资源包 在itunes里找到喜欢的应用,然后下载,直接将app拖到桌面.得到一个一个ipa资源包,如图 2.将资源包改成zip格式 3.解压zip资 ...

  6. 剑指offer 13:数值的整数次方

    题目描述 给定一个double类型的浮点数base和int类型的整数exponent.求base的exponent次方. 保证base和exponent不同时为0   问题分析 计算一个浮点数的整数次 ...

  7. RAID 独立磁盘冗余阵列 - redundant array of independent disks

    RAID:  RAID全称是独立磁盘冗余阵列(Redundant Array of Independent Disks),基本思想是把多个磁盘组合起来,组合一个磁盘阵列组,使得性能大幅提高. RAID ...

  8. [PHP] vscode配置SFTP扩展同步文件

    在我们的项目开发过程中,经常有一种模式,有一台linux的开发机作为我们的测试机器,上面安装了ftp服务.我们在windows系统的本地机器使用IDE编写代码,自动或者保存时同步上传到测试机下,这样就 ...

  9. 7. Go语言—时间模块

    一.时间模块 1. 统计程序执行时间 package main import ( "time" "fmt" ) func test() { time.Sleep ...

  10. day8_对象的交互

    #!/usr/bin/env python # -*- coding: utf-8 -*- # @Time : 2019/7/14 15:07 # @Author : 大坏男孩 # @File : d ...