4

如何找出由于找不到资源而未加载的所有元素？

    <body>
       <img src="notThere.png">
       <script src="notInHere.png"></script>
       <img src="DoesExist.png">

       // want to find the first and the script with unexisting sources, but not the second image with an existing source.

    </body>

有人可以给我一个提示如何找出这些元素吗？我认为，onerror为每个元素设置不是解决方案，因为元素可能是动态加载的。

不幸的是，window.onerror不会因“找不到资源”错误而触发。

例子：

    <body>
        <script src="someonesScript.js"></script> <!-- this script might load images/audio etc.. -->
        <script>
           // now put here whatever you like
           // but find out which resources (images,scripts,..) were tried to load (from the script above)
           // and can't be loaded


        </script>
    </body>

希望这个例子有助于理解我的问题。

4

3 回答 3

1

您可以使用 JavaScript 方法onerror来检查：

<img src="false.jpg" onerror="alert('Failed to load');" />

但是，如果您要动态加载图像，则可以使用file_exists() 之类的函数。

于 2013-08-09T21:26:37.803 回答
1

虽然这在理论上可以通过error事件和冒泡（error事件应该冒泡），但遗憾的是浏览器对它的支持很弱（至少可以说）

充其量，您可以在特定时刻循环遍历 DOM 并查找所有src属性，并检查它们是否指向有效资源（通过其他人建议的方法）。但这不会捕获任何已删除的内容。

资料来源：

http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-eventgroupings-htmlevents

http://www.quirksmode.org/dom/events/error.html

于 2013-08-09T22:33:02.880 回答
0 
function ImageExist(url) 
{
   var img = new Image();
   img.src = url;
   return img.height != 0;
}

我从用户 cichy 那里找到了这个：如何检查文件是否存在于 jQuery 或 JavaScript 中？

使用此函数只需执行以下操作：如果它不存在（onload），则将图像名称添加到数组中。在那里，您将获得所有信息

编辑：

如果您想查找页面上的所有图像，请尝试 PHP Simple HTML DOM Parser。您必须先在 此处下载。一个示例（在 NAVEED 的帮助下创建了关于如何在 PHP 中解析和处理 HTML/XML？）：

<?php
$html = file_get_html('filename.php');

$image_names = array(); //store all image_names in here 
foreach($html->find('img') as $element){
$image_names[] = $element->src;
}
function check_images($array){
foreach($array as $img){
    if(@getimagesize($img)) echo "true"; else echo "false: ".$img;
}

}
check_images($image_names);

如果对我来说完美！

于 2013-08-09T21:24:18.117 回答