htmlimg图片加载失败_js针对图片加载失败的处理方法分析

本文实例讲述了js针对图片加载失败的处理方法。分享给大家供大家参考，具体如下：

在项目中不可避免会用到图片，尤其是列表，有时候图片会加载失败；这样就会显示一个很难看的坏图片缩略图；下面介绍两种方法，解决这个问题：

1、如果在你的项目中有引入jQuery插件，你可以使用error([[data],fn])这个函数；

$("img").error(function(){

//当图片加载失败时，你要进行的操作

//$(this).attr('src','images/no_pic.jpg');

});

2、如果项目中没有jQuery这样的插件，可以使用HTML的DOM事件onerror事件处理；

HTML 中:

尝试一下

JavaScript 中:

object.οnerrοr=function(){myScript};

尝试一下

JavaScript 中, 使用 addEventListener() 方法:(注意： Internet Explorer 8 及更早 IE 版本不支持 addEventListener() 方法。)

object.addEventListener("error", myScript);

支持的 HTML 标签: , , ,

另外，当图片加载错误的时候,触发onerror事件，还可使用一下方法进行处理:

①. 隐藏

②. 用默认的图片替换：

PS：这里再为大家附上javascript系统自带事件参考表供大家参考查询：

希望本文所述对大家JavaScript程序设计有所帮助。

htmlimg图片加载失败_js针对图片加载失败的处理方法分析相关推荐

在java中如何让背景图片连续不断地滚动_JS实现图片的不间断连续滚动
js替代marquee实现图片无缝滚动可能大家都碰到过,当marquee中滚动的是图片的时候,滚到终点的时候直接就跳回到起点了,而不像文字那样可以无缝滚动,下面介绍的是通过js来实现图片的无缝滚动. ...
前端vue里面点击加载更多_js实现『加载更多』功能实例
DEMO : 滚动加载示例关于如何实现『加载更多』功能,网上有插件可用,例如比较著名的使用iscroll.js实现的上拉加载更多.下拉刷新功能. 但实际用起来却是很麻烦.由于是第三方插件,要按照对方 ...
vue图片懒加载插件vue-lazyload监听加载失败事件的解决方案
对于vue项目而言,图片懒加载是一个常见的图片加载方案,可以优化用户体验,而vue-lazyload则是一个广泛使用的插件. 对于某些业务场景,我们需要监听图片加载失败事件,而后进行相应的处理,然 ...
vue图片加载失败使用默认图片，el-image支持懒加载，自定义占位、加载失败等
<template><d2-container><h3>image加载失败使用默认图片</h3><img src=""alt= ...
JS针对图片加载及404处理
前言网站运营久了之后,无法避免会出现图片404的情况,原因可能是图片文件本来就不存在或目前不存在.常见的解决方案是将404图片隐藏或者是替换为默认的图片. img标签事件属性 img标签可使用的时间 ...
img实现图片加载前默认图片，加载时替换真实图片，加载失败时替换加载失败图片
文章目录前言一.加载前二.加载成功三.加载失败总结前言开发过程中,我们希望图片在加载失败的时候会替换成加载失败的图片,同时为了更好的体验,加载前最好也要有一张占位图片,即实现加载前显示一 ...
前端页面图片加载失败显示默认图片
方法有多种: 1.首先说我用的,看代码 //页面图片加载失败时默认显示统一处理 document.addEventListener("error", function (e) { ...
vue解决图片加载失败显示默认图片的方法
在项目中经常会遇到图片加载失败需要显示默认图片的场景,那么如何在图片src资源加载失败显示出默认的图片呢? 方法一:onerror <img src="原来要加载的资源" o ...
关于img标签加载图片失败优化以及懒加载。
这篇博客算是完全的笔记了,记录一下平常中不怎么注意的img标签的一些事. 昨天看到这篇Handling broken images with the service worker文章,这文章中有另外提 ...

htmlimg图片加载失败_js针对图片加载失败的处理方法分析

htmlimg图片加载失败_js针对图片加载失败的处理方法分析相关推荐

最新文章

热门文章