如何判断网页中图片加载成功或者失败?_WEB前端开发

如何判断网页中图片加载成功或者失败?_WEB前端开发,第1张

如何实现图片懒加载?_WEB前端开发

实现懒加载的方法:​首先自定义属性如【data-imgurl】,存放着图片的路径;然后通过js判断界面滚动的位置或图片是否已加载;最后加载再去获取属性【data-imgurl】的值赋给src即可。


判断网页中图片加载成功或者失败的方法:首先需要判断图片是否能成功被加载;然后自动换成“无法找到图片”之类的系统图片即可,代码为【for(var i=0;i<document.images.length;i++)】。


如何判断网页中图片加载成功或者失败?_WEB前端开发,第2张


判断网页中图片加载成功或者失败的方法:

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


JS中渐进增强是什么意思?_WEB前端开发

渐进增强的意思是针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。


做法很简单

在BODY中加段很简单的JS代码

document.body.οnlοad=getImg;
function getImg()
{ 
 for(var i=0;i<document.images.length;i++)
 {
  if(document.images[i].readyState!='complete')
   document.images[i].src="/images/no.JPG";
 }
}

或者在每张图片的onload对readyState进行判断

相关学习推荐:javascript视频教程

以上就是如何判断网页中图片加载成功或者失败?的详细内容,更多请关注ki4网其它相关文章!

JS中行内style怎么写?_WEB前端开发

行内style的写法为:1、对复合属性的写法是去掉中间的“—”,并将第二个单词大写,代码为【alert(box.style.color)】;2、float是关键字有特殊写法,代码为【alert(box.style.float)】。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://www.outofmemory.cn/zaji/561046.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2020-06-30
下一篇 2020-06-30

发表评论

登录后才能评论

评论列表(0条)

保存