请选择 进入手机版 | 继续访问电脑版

饕餮源码网,商业源码,游戏源码下载,discuz插件,棋牌源码下载,精品源码论坛

 找回密码
 立即注册
查看: 6|回复: 4

[JavaScript] 解决js图片加载时出现404的问题

[复制链接]

7万

主题

8万

帖子

32万

积分

论坛元老

Rank: 8Rank: 8

积分
329525
发表于 2015-11-4 11:44:24 | 显示全部楼层 |阅读模式
这篇文章主要介绍了解决js图片加载时出现404问题的方法,这方面有困惑的朋友可以参考一下

运营网站久了之后,无法避免会出现图片404的情况,原因可能是图片文件本来就不存在或目前不存在。常见的解决方案是将404图片隐藏或者是替换为默认的图片。 
img标签事件属性
img标签可使用的时间属性有:
onabort, onbeforeunload, onblur, onchange, onclick, oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, onerror, onfocus, onkeydown, onkeypress, onkeyup, onload, onmessage, onmousedown, onmousemove, onmouseover, onmouseout, onmouseup, onmousewheel, onresize, onscroll, onselect, onsubmit, onunload
img标签常用的事件如下:

onerror:图像加载过程中发生错误时被触发。
onabort:图片加载的时候,用户通过点击停止加载时触发,通常在这里触发一个提示:“图片正在加载”。
onload:当图片加载完成之后触发。
1. 对图片监听onerror事件

<img src="someimage.png" onerror="imgError(this);" /> 
 
// 原生JS: 
function imgError(image){ 
 // 隐藏图片 
 image.style.display = 'none'; 
 // 替换为默认图片 
 // document.getElementById("img").setAttribute("src", "images/demo.png"); 
} 
 
// 使用jQuery处理: 
function imgError(image){ 
 $(image).hide(); 
 // $(this).attr("src", "images/demo.png"); 
} 

注意:需要将处理函数定义在head,防止图片加载出错时没有读取到处理函数
 2. 使用jQuery监听error

// 通常不会再HTML里面内联js,可以使用.error对图片进行监听处理 
$('#test img').error(function() { 
 $(this).hide(); 
 // $(this).attr("src", "images/demo.png"); 
}); 

注意:jQuery加载需要在img前,处理函数需在img后
3. 使用函数处理

// 原生JS解决方案 
function $id(id) { 
 return !id || id.nodeType === 1 ? id : document.getElementById(id); 
} 
function isType(o, t) { 
 return (typeof o).indexOf(t.charAt(0).toLowerCase()) === 0; 
} 
 
// 主要逻辑 
function image(src, cfg) { 
 var img, prop, target; 
 cfg = cfg || (isType(src, 'o') ? src : {}); 
 
 img = $id(src); 
 if (img) { 
  src = cfg.src || img.src; 
 } else { 
  img = document.createElement('img'); 
  src = src || cfg.src; 
 } 
 
 if (!src) { 
  return null; 
 } 
 
 prop = isType(img.naturalWidth,'u') ? 'width' : 'naturalWidth'; 
 img.alt = cfg.alt || img.alt; 
 
 // Add the image and insert if requested (must be on DOM to load or 
 // pull from cache) 
 img.src = src; 
 
 target = $id(cfg.target); 
 if (target) { 
  target.insertBefore(img, $id(cfg.insertBefore) || null); 
 } 
 
 // Loaded? 
 if (img.complete) { 
  if (img[prop]) { 
   if (isType(cfg.success,'f')) { 
    cfg.success.call(img); 
   } 
  } else { 
   if (isType(cfg.failure,'f')) { 
    cfg.failure.call(img); 
   } 
  } 
 } else { 
  if (isType(cfg.success,'f')) { 
   img.onload = cfg.success; 
  } 
  if (isType(cfg.failure,'f')) { 
   img.onerror = cfg.failure; 
  } 
 } 
 
 return img; 
} 

 以上函数有许多用处:
1. 获取图片信息:图片是否可下载,图片宽高

image('img',{ 
 success : function () { alert(this.width + "-" + this.height); }, 
 failure : function () { alert('image 404!'); }, 
}); 
 
// 验证资源是否下载 
image('images/banner/banner_2.jpg', { 
 success : function () {console.log('sucess')}, 
 failure : function () {console.log('failure')}, 
 target : 'myContainerId', 
 insertBefore : 'someChildOfmyContainerId' 
}); 

 2. 下载并插入图片

var report = $id('report'), 
 callback = { 
  success : function () { 
   report.innerHTML += '<p>Success - ' + this.src + ' ('+this.offsetWidth+'x'+this.offsetHeight+')</p>'; 
  }, 
  failure : function () { 
   report.innerHTML += '<p>Failure - ' + this.src + ' ('+this.offsetWidth+'x'+this.offsetHeight+')</p>'; 
  }, 
  target : 'target' 
 }; 
 
image('img', callback); 
image('images/banner/banner_2.jpg', callback); 

以上就是js针对图片加载时出现404问题的解决办法,希望大家有所收获。

回复

使用道具 举报

0

主题

8547

帖子

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2022-9-6 12:00:07 | 显示全部楼层
啊啊啊啊啊啊啊啊啊啊啊啊啊啊
回复 支持 反对

使用道具 举报

1

主题

4444

帖子

93

积分

注册会员

Rank: 2

积分
93
发表于 2022-9-10 05:10:47 | 显示全部楼层
额UI废物iuhfujewfiewnnfen
回复 支持 反对

使用道具 举报

1

主题

8530

帖子

182

积分

注册会员

Rank: 2

积分
182
发表于 2022-9-12 13:32:32 | 显示全部楼层
很不错的源码论坛
回复 支持 反对

使用道具 举报

16

主题

8827

帖子

376

积分

中级会员

Rank: 3Rank: 3

积分
376
发表于 2022-11-25 11:05:19 | 显示全部楼层
天天源码社区论坛
回复 支持 反对

使用道具 举报

高级模式
B Color Image Link Quote Code Smilies

本版积分规则

手机版|小黑屋|网站地图|饕餮源码网 ( 海外版 )

GMT+8, 2022-12-4 13:25 , Processed in 0.124278 second(s), 28 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表