img error 图片加载失败的最佳方案
有时候, 当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 图片加载失败的最佳方案的更多相关文章
- <img> 标签 图片加载失败时候处理方案
应用场景 在开发中,经常遇到一种情况,数据库不存在图片地址,或者存在图片地址,但图片已经被删除,这个时候会出现加载失败情况.提供以下解决方案 解决方案 在 img 标签 加上onerror=" ...
- AngularJS中如果ng-src 图片加载失败怎么办
我们知道AngularJS加载图片的方法是用技术分享加ng-src标签,例如: <img ng-src="{{currentUrl}}"/> 其中currentUrl为 ...
- js 图片加载失败处理方法
在项目中不可避免会用到图片,尤其是列表,有时候图片会加载失败:这样就会显示一个很难看的坏图片缩略图:下面介绍两种方法,解决这个问题: 1.如果在你的项目中有引入jQuery插件,你可以使用error( ...
- angular 图片加载失败 情况处理? 如何在ionic中加载本地图片 ?
1.angular 图片加载失败 情况处理 在directive中定义组件,在ng-src错误时,调用err-src app.directive('errSrc',function(){ return ...
- 伪元素黑魔法:一个替代onerror解决图片加载失败的方案
问题的引出是这样的,在一个项目中有大量的页面主体是table做数据展示,所以就封装了一个table的组件,提供动态渲染的方案.有个问题是数据类型中有图片,对于图片的加载失败我们需要做容错.一般我们的思 ...
- 当h5页面图片加载失败后,给定一个默认图
本文主要讨论页面中图片加载失败后替换默认图片的几种方式 重点来了:一定要记住error事件不冒泡. 相关的知识点:jquery的ready方法.$("img").error().i ...
- css背景图片加载失败,页面部分图标无法显示
1.问题表现:首屏缺失部分图标.点击按钮切换为激活状态时,部分按钮的激活态图标无法显示. 2.问题原因:网络极差,断断续续,点击时添加class:active变为激活态, active.png这张图片 ...
- 当图片加载失败时更换图片, Firefox onerror 报错
当图片加载失败时更换图片. <!DOCTYPE html> <meta charset="UTF-8"> <img src="http:// ...
- WebForm、MVC图片加载失败处理
还是那个该死的WebFrom项目,部分功能替换为MVC后感觉好多了,但是WebForm.MVC都有图片加载失败时显示提示图片的需求,并且统一在js中处理.问题来了,js中图片路径怎么处理呢?现场有可能 ...
随机推荐
- shell 练习题1
1.实现每次打开一个xx.sh时,自动添加注释信息 [root@chengyinwu ~]# cat .vimrc set ignorecase set nu set autoindent autoc ...
- uni-app条件编译:#ifdef #ifndef #endif
语法: // #ifdef %PLATFORM% 这些代码只在该平台编译 // #endif #ifdef : if defined 仅在某个平台编译 #ifndef : if n ...
- 面试题-JavaScript交换两个变量的方法
在平时的业务开发或者面试过程中,经常会遇到交换两个变量这种问题,于是,个人总结以下几种交换变量的方法: 1.方案一 使用一个临时变量来交换 2.方案二 使用ES6解构赋值语法来交换 3.方案三利用数 ...
- 2019年上半年收集到的人工智能LSTM干货文章
2019年上半年收集到的人工智能LSTM干货文章 门控神经网络:LSTM 和 GRU 简要说明 LSTM-CNN-Attention算法系列之一:LSTM提取时间特征 对时间序列分类的LSTM全卷积网 ...
- CarTool 使用,获取图片资源
程序:gitHub: 项目地址 使用方法: 1.拿到资源包 在itunes里找到喜欢的应用,然后下载,直接将app拖到桌面.得到一个一个ipa资源包,如图 2.将资源包改成zip格式 3.解压zip资 ...
- 剑指offer 13:数值的整数次方
题目描述 给定一个double类型的浮点数base和int类型的整数exponent.求base的exponent次方. 保证base和exponent不同时为0 问题分析 计算一个浮点数的整数次 ...
- RAID 独立磁盘冗余阵列 - redundant array of independent disks
RAID: RAID全称是独立磁盘冗余阵列(Redundant Array of Independent Disks),基本思想是把多个磁盘组合起来,组合一个磁盘阵列组,使得性能大幅提高. RAID ...
- [PHP] vscode配置SFTP扩展同步文件
在我们的项目开发过程中,经常有一种模式,有一台linux的开发机作为我们的测试机器,上面安装了ftp服务.我们在windows系统的本地机器使用IDE编写代码,自动或者保存时同步上传到测试机下,这样就 ...
- 7. Go语言—时间模块
一.时间模块 1. 统计程序执行时间 package main import ( "time" "fmt" ) func test() { time.Sleep ...
- day8_对象的交互
#!/usr/bin/env python # -*- coding: utf-8 -*- # @Time : 2019/7/14 15:07 # @Author : 大坏男孩 # @File : d ...