图片错误在移动设备上加载占位符图片问题 safari/chrome

Question

我正在使用以下脚本加载占位符图像，如果图像 src png 不是 available/error 的：

<script type="text/javascript">
jQuery("img").error(function () {
    jQuery(this).unbind("error").attr("src", "/images/people_placeholder.png");
});
</script>

我正在加载结束 </body> 标记之前的上述脚本。

它在 Chrome 桌面上工作正常并显示占位符图像。

在 Safari/Chrome

中，它在 Safari 桌面版或移动版 phone 上不起作用

有什么想法吗？

Answer 1

可能是因为如果 onerror 事件已经触发，则处理程序未被调用，您可以尝试捕获 onerror 事件，将此脚本放在 </head> 标记之前：

document.addEventListener('error', function (event) {
     var elm = event.target;
     if (elm.tagName == 'IMG') {
         elm.src = "/images/people_placeholder.png";
     }
 }, true ); // true to capture event

或者尝试检查特定属性，您可以在 </body> 标签之前使用：

jQuery("img").one('error', function () {
    jQuery(this).attr("src", "/images/people_placeholder.png"); //.unbind("error") is useless here
}).each(function () {
    if (this.complete && !this.naturalHeight && !this.naturalWidth) {
        $(this).triggerHandler('error');
    }
});

Answer 2

试试这个

我在这里找到这个 Link

function imgError(image) {
image.onerror = "";
image.src = "/images/people_placeholder.gif";
return true;
}

HTML:

<img src="image.png" onerror="imgError(this);"/>

Answer 3

<img src="URL_OF_IMAGE" alt="image info" onerror="this.src='DEFAULT_IMG_URL'"/>

check docs

或创建全局函数来解决this issue

图片错误在移动设备上加载占位符图片问题 safari/chrome

image error load placeholder image issue on mobile safari/chrome

jquery

image

function

unbind

attr