问onLoad与onerror函数的冲突
EN

Stack Overflow用户

提问于 2015-02-19 12:14:00

回答 1查看 149关注 0票数 0

创建简单的状态检查器，但是，当映像无法加载并且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>

html

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-02-19 12:20:31

正如您所提到的，您的代码中的问题是在您在onload中分配成功/错误图像之后，onerror会触发，所以您只需禁用它。

要做到这一点，只需清除onerror和onload处理程序中的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：如果在加载远程映像时需要显示一些实际的旋转器，可以使用one 显示旋转器& to；code>E 218 success/error E 121图像E 222和E 123另一个e 224 img E 128/code>实际显示E 229E 130检索远程imgE 231/code>(该代码激发onload和d33)。

下面是一个例子：

<!-- 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>

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/28606123

复制

相似问题

问onLoad与onerror函数的冲突
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问onLoad与onerror函数的冲突EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问onLoad与onerror函数的冲突
EN