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

  
  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. 缓存中使用的ReentrantReadWriteLock锁

    java中提供了lock锁,简便了设计缓存,下面程序主要是使用读写锁的应用.... import java.util.HashMap; import java.util.Map; import jav ...

  2. ZedGraph设置辅助线

    ZedGraph设置辅助线 1.一般来说ZedGraph设置参考线可以用 ZedGraph对象.YAxis.MajorGrid.IsVisible = True '水平参考线 ZedGraph对象.X ...

  3. 一步步改造wcf,数据加密传输-匿名客户端加密传输

    一步步改造wcf,数据加密传输-匿名客户端加密传输 百度搜索wcf加密传输,资料挺多,真真正正能用的确不多. 一是本来就很复杂,而是各位大神给的资料不足.本人今天来提供一个简易方法. 匿名客户端加密传 ...

  4. 使用EF6连接mariaDB出现中文查找不到数据的问题

    1.问题描述 这两天使用ef6.0查询mariaDB出现了数据查询不到的情况 2.问题分析 后来发现除了这段数据查询不到,其他都能查询,于是逐步对比代码,发现其他数据都是英文的,而这句是中文的于是把条 ...

  5. 一个docker容器中运行多个服务还是弄一堆docker容器运行?

    不建议直接在单个 Docker 容器中运行多个程序. 以 2017年 10 月18 日 Docker 官方支持 Kubernetes 为分水岭计算,Kubernetes 赢得容器编排之战的最终胜利已经 ...

  6. [leetcode.com]算法题目 - Restore IP Addresses

    Given a string containing only digits, restore it by returning all possible valid IP address combina ...

  7. Poetry

    1. Absence to love is what wind is to fire. It extinguishes the small; It inflames the great. 2. It ...

  8. 【文文殿下】NOIp2018游记

    Day-1 本段更新于 2018年11月8日23:26:44 今天还在机房里面,无所事事吧.上午睡了一上午,出去理了一下发,花了20块钱 QAQ. 下午来到机房,复习了一下exgcd的东西. 发现自己 ...

  9. Akka(42): Http:身份验证 - authentication, authorization and use of raw headers

    当我们把Akka-http作为数据库数据交换工具时,数据是以Source[ROW,_]形式存放在Entity里的.很多时候除数据之外我们可能需要进行一些附加的信息传递如对数据的具体处理方式等.我们可以 ...

  10. 【翻译】 Windows 内核漏洞学习—空指针解引用

    Windows Kernel Exploitation – NullPointer Dereference 原文地址:https://osandamalith.com/2017/06/22/windo ...