在浏览网页时,是不是有时会碰到图片加载不出来的情况?这可太糟心啦!今天给大家分享一个 img 图片加载失败时显示默认图片的方法。在本站中,此方法只用于"友链"部分)。
缘由
JavaScript代码冲突,导致原方法无法触发 onerror 事件和调用 handleImageError 函数。
解决方法
1.引入Js代码
在需要使用该方法的地方重新引入以下Js代码:
<script type="text/javascript">
function slnotimg() {
var img = event.srcElement;
img.src = "加载默认图";
img.onerror = null;
}
</script>
2.添加Src属性
在 img
标签的 Src=" "
中添加以下新属性:
onerror="slnotimg();"
例如:
<img src="加载默认图" onerror="slnotimg();"/>
此方法可单独用于 img 加载默认图使用,也可以用作原方法失效时的备用方案使用。
完!
这方法不错呢,我去研究一下~
这是来挖矿吗 哈哈 方法的确可以 值得一试
不明觉厉,哈哈哈
图片的这个onerror事件确实妙用无穷,我记得网站防镜像就可以用他来对付~
嗯哼 😉
还可以这样玩的嘛
当然了 好东西 从不吝啬分享
大佬啊,收下我的膝盖
这对于非科班出身的我来说。。。太超纲了
😂嗯哼
图片加载我有个很妙的设计——前提是我全站都是用 JS DOM 渲染而成的。图片元素我会先在主 DOM 构建一个 img 元素,用灰色 cavans 占位。然后虚空 DOM 构建 img 尝试 load,一旦 onerror 就删除虚空 DOM 每秒重试一次。一旦 load 成功就意味着图片已经在本地缓存了,直接替换主 DOM 的 img src。妙就妙在,onerror 我不是重试,而是重建元素来一遍,避免乱七八糟的问题。
不得不说 这个设计很不错👍用灰色 canvas 占位和在虚空 DOM 中进行加载尝试的策略很独特 通过重建元素处理 onerror 能够规避很多潜在问题,这一点想得很周全。
但… 你是否考虑过浏览器对于这种频繁的 DOM 操作的兼容性呢?还有就是我用的服务器怕承受不了这个内存占用的压力(说白了,就是服务器太拉胯了😂)
服务器只吐出原始数组,页面渲染都由 JS 完成。这么做的原因要追溯到我一开始买的服务器是 1 核 2G,无所不用其极地将压力转嫁给用户的浏览器。
哈哈 方法的确是不错😂
插眼,备用😁
咦,这评论出问题了吗😂
插眼,备用😁
咦~ 复制粘贴吗
方法记下了,哈哈哈哈
哈哈😎
插眼,备用😁
哈哈