Question

如何查找因未找到资源而未加载的所有元素？

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

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

Answer 1

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

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

但如果您动态加载图片，则可以使用file_exists()等函数。

Answer 2

虽然理论上这可能是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

Answer 3

function ImageExist(url) 
{
   var img = new Image();
   img.src = url;
   return img.height != 0;
}

我是从用户cichy上发现的：How do I check if file exists in jQuery or JavaScript?

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

修改

如果要查找页面上的所有图像，请尝试PHP Simple HTML DOM Parser。您必须先下载Here。一个例子（在How do you parse and process HTML/XML in PHP?上发布的NAVEEDs帮助下创建）：

<?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);

如果对我有用的话！

获取未加载的元素

3 个答案: