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

  
  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. Spring中ApplicationEvent和ApplicationListener封装

    1.测试程序EventTest.java,发布一个事件只需要调用FrameEventHolder.publishEvent()方法即可. package com.junge.spring.event; ...

  2. Azure DevOps Server:Git权限设置

    Azure DevOps Server 权限概述 在Azure DevOps Server (之前名称为TFS)中,权限是一个比较复杂的概念.从权限层级上来说,包括服务器级别.团队项目集合级别.团队项 ...

  3. .net core部署到linux可能碰到的问题

    缺少icu库以独立部署 (SCD)的方式发包,运行时报错错误信息:FailFast: Couldn't find a valid ICU package installed on the system ...

  4. 企业项目开发--cookie(1)

    此文已由作者赵计刚授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 注:本章代码基于<第五章 企业项目开发--mybatis注解与xml并用>的代码,链接如下: h ...

  5. 百度小程序button去掉默认边框

    百度小程序button去掉默认边框: button::after{ border:none; }

  6. pycharm光标变成黑框,恢复成竖线

    pycharm光标变成黑框,如下图所示 解决办法: 按外接键盘上的Insert键,即可恢复.

  7. VS2017新建视图中文乱码解决办法

    问题:VS2017 ASP.NET Core 新建视频默认为ASNI编码格式 解决办法 1:直接将视图页面通过记事本打开,然后另存为UTF-8解决. 2:安装扩展TextTools解决视图文件编码问题 ...

  8. Spring Boot多数据源配置与使用

    在单数据源的情况下,Spring Boot的配置非常简单,只需要在application.properties文件中配置连接参数即可.但是往往随着业务量发展,我们通常会进行数据库拆分或是引入其他数据库 ...

  9. 不一样的日期、时间转换(moment.js)

    无意中遇到了一种很奇怪的日期格式,从接口中返回的日期是这样的,如 2018-02-06T11:59:22+08:00 .然而这却不是我们想要的,我们要的是这种,YYYY-MM-DD HH:mm:ss. ...

  10. java批量解压文件夹下的所有压缩文件(.rar、.zip、.gz、.tar.gz)

    // java批量解压文件夹下的所有压缩文件(.rar..zip..gz..tar.gz) 新建工具类: package com.mobile.utils; import com.github.jun ...