页面上有用户自定义图片的时候经常会出现用户定义的图片特别是站外图片被删除或无法访问,因此,需要判断图片是否能成功被加载,否则自动换成“无法找到图片”之类的系统图片。

  
  document.body.onload = getImg;

  function getImg() {
  for (var i = 0; i < document.images.length; i++) {
  if (document.images[i].readyState != 'complete')
  document.images[i].src = "/pc/images/fail.png";
   }
  }

或者在每张图片的onload对readyState进行判断

关于web开发中,图片加载失败替换为默认图片的更多相关文章

  1. ionic 图片加载失败,显示默认图片代替

    1.首先编写自定义指令 angular.module('starter.directives', []) //当图片找不到事显示替代图片 .directive("errSrc", ...

  2. vue自定义指令,比onerror更优雅的方式实现当图片加载失败时使用默认图,提供三种方法

    首先,来看下效果图(演示一下图片正常加载与加载失败时的效果) 在线体验地址:https://hxkj.vip/demo/vueImgOnerror/ 一.常规方法解决 我们都知道,img标签支持one ...

  3. Jquery判断页面图片是否加载失败,加载失败则显示默认图片

    例子: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. ...

  4. vue,onerror实现当图片加载失败时使用默认图

    1. 2.

  5. electron-vue 图片加载失败后使用默认头像

    <img :src="item.headUrl" alt="" class="contact-head" :onerror=" ...

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

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

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

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

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

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

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

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

随机推荐

  1. sql server 字符串分割函数

    ),)) )) as begin ) set @SourceSql=@SourceSql+@StrSeprate while(@SourceSql<>'') begin )) insert ...

  2. JS文件中的中文在网页引用时显示乱码的简单解决方式

    今天把一个jquery方法从前台cshtml文件转移到单独的js文件中后执行不成功,调试发现if判断中的中文字符串变成了乱码,之前在前台文件中是可以正常显示的,所以判定可能是跟文件的编码方式有关系. ...

  3. <转>php中heredoc与nowdoc的使用方法

    http://www.361way.com/php-heredoc-nowdoc/3008.html 一.heredoc结构及用法 Heredoc 结构就象是没有使用双引号的双引号字符串,这就是说在 ...

  4. Unable to preventDefault inside passive event listener due to target being treated as passive?

    使用滚动时候,新版google浏览器,会弹出如下的警告. 解决方法,可以加上* { touch-action: none; } 这句样式去掉. 其原因:https://developers.googl ...

  5. pythonweb框架Flask学习笔记05-简单登陆

    源代码从下链接引用:https://www.cnblogs.com/felixwang2/p/9261493.html 我使用的是python3.6 在运行代码的时候遇到了以下问题 session[' ...

  6. 2. GitHub远程仓库

    1. GitHub ssh-keygen -t rsa -C "youremail@example.com"        之后再用户主目录里会有隐藏的.ssh目录,里面有id_r ...

  7. Python中的 // 与 / 的区别

    " / " 表示浮点数除法,返回浮点结果;" // " 表示整数除法,返回不大于结果的一个最大的整数 [code] print("6 // 4 = & ...

  8. 使用安装 php-memcache-client

    1.memcache:是一个高效的分布式内存对象缓存系统 2.  IES---请求--->服务器(apace) | | |---->会查看memcache.是否有IES想要的内容--> ...

  9. Intellij添加Jetty远程Debug

    步骤一: 步骤二: 步骤三:-agentlib:jdwp=transport=dt_socket,server=y,suspend=n,address=15005 步骤四: 找到服务器上jetty的b ...

  10. 工具-CrashMonkey4IOS,Monkey测试方案

    在TesterHome看到了CrashMonkey4IOS,顿时觉得之前用instrument在做monkey测试,非常的弱智!crash后啥都看不到,无crashlog,无crash步骤,并且也不能 ...