Question

创建简单的状态检查器，但是当图像无法加载并且src更改为离线符号时，即使网站处于脱机状态，也会触发onLoad功能并将图像更改为在线图像。

我知道我可以通过在我正在测试的网站上托管在线符号来解决这个问题，但我希望能够测试我不拥有或喜欢博客的网站，其中图片未托管在您的域中

<!DOCTYPE html>
<html>
    <head>
        <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"/>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>
            eTree Status
        </title>

    </head>
    <body>
        <div style="margin: 20px; background-color: #EEE; width: 400px; padding: 10px;">
            <img style="height:20px;" src="http://s.etree.biz/1AKeMjI" alt="status" onLoad="this.src='http://s.etree.biz/1E94ZDh'" onerror="this.src='http://s.etree.biz/1zQwvPm'" />
             blog.etree.biz
             <br/>
            <img style="height:20px;" src="http://s.etree.biz/1G7agdE" alt="status" onLoad="this.src='http://s.etree.biz/1E94ZDh'" onerror="this.src='http://s.etree.biz/1zQwvPm'" />
             www.etree.biz
             <br />
        </div>
    </body>
</html>

Answer 1

正如您所提到的，代码中的问题是onload在onerror中分配成功/错误图像后会触发，因此您可以将其禁用。

要执行此操作，只需清除onload和onerror处理程序中的onload处理程序，例如：

<img src="http://example.org/image.png"
     onload="this.onload=null; this.src='success.png'"
     onerror="this.onload=null; this.src='error.png'">

编辑：如果您需要在加载远程图片时显示一些实际的微调器，您可以使用一个img来显示微调器＆amp; 成功/错误图片和另一个img实际检索远程img （触发onload和onerror。

以下是一个例子：

<!-- unexisting site or broken IMG -->
<div>
    <img id="state-1" src="http://www.xiconeditor.com/image/icons/loading.gif" />
    <img src="http://unexisting.com/"
         style="display: none"
         onload="document.getElementById('state-1').src = 'https://education.skype.com/assets/guest-speaker-signup/success-icon-255193729c9e0a50b2d36055359dd877.png';"
         onerror="document.getElementById('state-1').src = 'http://creativity-online.com/assets/images/sprites-retina/icon-error.png';" />
    Site 1
</div>

<!-- existing site with existing IMG -->
<div>
    <img id="state-2" src="http://www.xiconeditor.com/image/icons/loading.gif" />
    <img src="http://www.coffeecup.com/images/icons/applications/web-image-studio_128x128.png"
         style="display: none"
         onload="document.getElementById('state-2').src = 'https://education.skype.com/assets/guest-speaker-signup/success-icon-255193729c9e0a50b2d36055359dd877.png';"
         onerror="document.getElementById('state-2').src = 'http://creativity-online.com/assets/images/sprites-retina/icon-error.png';" />
    Site 2
</div>

......这是工作小提琴：http://jsfiddle.net/andunai/2s2qeuyd/

onLoad与onerror功能发生冲突

1 个答案: