js处理img标签加载图片失败,显示默认图片

1.第一种方法: 
如果已经引入了jquery插件,就很好办。没有的话,如果实在需要,可以附上代码:

    script(type=‘text/javascript‘, src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js")
    //这是jade文件的写法,可以自行转换为html

handle error
    $(‘img‘).error(function(){
            $(this).attr(‘src‘, "default.jpg(默认图片的url地址)");
         });

2.第二种方法:如果img标签是少量的话,可以用这个: 
img的onerror事件

<img src=‘test.jpg‘ alt=‘test‘ onerror="this.src=‘default.jpg‘">
//alt属性的意思是在图片为加载成功时显示的文字

原文地址:https://www.cnblogs.com/xiaoqi2018/p/10583414.html

时间: 2024-08-28 11:25:20

js处理img标签加载图片失败,显示默认图片的相关文章

img 图片加载出错时 显示默认图片

在 img 标签 加上onerror="onerror=null;src='123.jpg'" ,即当图片加载失败时会自动加载123.jpg ,例如 <img src="abc.jpg" onerror="onerror=null;src='123.jpg'" /> 也可省略部分 <img src="abc.png" onerror=src="123.png" >

html 加载图片失败显示默认图片

@"<img src=\'aaa.png\' onerror=\"this.src='[email protected]'\"; alt=\"pic\" / onclick=\" (this);\"/>"

js解决img标签加载失败显示默认图片

问题: 为所有显示楼盘的页面添加一个加载失败的默认图片. 基本思路: img标签中有个onerror属性,专门用来处理加载失败的事件.所以可以用jquery添加onerror属性,在onerror中加载默认图片. $(function(){ //注册加载失败事件,再次加载时先重新设置url,在清空原先的注册加载失败事件 $("img").attr("onerror","this.src='img/error.jpg;this.onerror=null;'&

使用JS,使得加载页面之前显示GIF图片

下面是代码,这是伪加载提示条,跟加载速度无关 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> .current a { font-size: 20px; } .over { display: block; position: abs

图片加载失败显示默认图片占位符

为网站的图片加上加载失败的默认占位符会让网站看起来更专业.更严谨. <img src="__PUBLIC__/img/simple/simplelove.png"  onerror="onerror=null;src='__PUBLIC__/img/defaultpic.jpg'"> 原文地址:https://www.cnblogs.com/Zmmy/p/8531205.html

JS图片加载失败显示默认图片

代码如下: <div id='photo<%# Container.DataItemIndex+1%>' style="position: absolute; display: none;"> <img alt="照片" src='../HR_System/Photo/s_<%# Eval("pr0214")%>.jpg' onerror="document.getElementById('vi

小程序加载图片失败,默认图片的替换方法

需求前端请求后台的接口的时候回,数据会返回图片的url地址,但是有的时候可能是数据字段的错误,或者是返回的链接中信息是404,那么前端这边怎么处理. 大致思路:我们会在data数据中得到一个list一样的图片数据,或者你可以当成接口返回的数据结构,然后我们循环整个数据的时候会在image标签找不到资源的时候error事件,我们就会得到一个失败实例的方法,然后我们在数据循环的时候可以得到list的index值,也就是索引值.把这个值传到error方法中进行list数据的替换就可以了.怎么样简单吧~

JS教程之实现加载图片时百分比进度

思路:思路其实很简单,ajax执行时,会生成一个event对象,其中会包含要加载的文件的大小和当前已经加载完成部分的大小,通过这两个值即可计算出百分比 事件介绍onprogress 当浏览器正在加载媒介数据时触发onload 在onprogress事件后,加载媒介数据完毕时触发 附图一张:event对象所包含的所有值,其中total为总大小,loaded为已经加载完的大小(图中显示的为加载一张7M的图片时的progress信息) demo: <script src="http://file

jquery文档加载几种写法,图片加载写法

jquery文档加载写法: $(function(){ }) ; //个人最常使用方式 $(document).ready(function(){ }); //调用文档对象下的ready方法传入一个函数. $(window).load(function() { });//调用window对象下的load方法传入一个函数. (function() { })(jQuery)//()()表示立即执行 并且传入jquery = $ 所以之前$也可以替换为jQuery 注意: jquery的ready只是