如何使用JavaScript（包括CSS和img）统计页面上的所有图像

使用JavaScript在页面上获取

元素非常简单：

• document.images

• document.getElementsByTagName（'img'）

但是有没有一种（相当简单的）方法可以将所有的图像加载到页面上

我考虑过使用

querySelectorAll（'*'）

遍历所有元素，并检查

url

的

style.backgroundImage

和

style.backgroundImage

属性，然后将其与html图像元素相结合

这是我唯一的选择吗？这能抓住一切吗？我想象有一些边缘案例，图像由JavaScript加载，新的HTML5图像元素（图片，…）

---

我还不确定我想如何处理数据uri图像或SVG，但如果答案涵盖了这一点，这可能是一件好事。

您可以在页面底部执行以下操作：

<script type="text/javascript">
    var imgCount = document.images.length;
    var svgCount = document.getElementsByTagName('svg').length;
    var finalCount = imgCount + svgCount;
</script>

var imgCount=document.images.length；
var svgCount=document.getElementsByTagName（'svg'）.length；
var finalCount=imgCount+svgCount；

使用jquery，您可以将类似的内容用于计数器背景图像

var ctBkImg = 0;
$("*").each(function(){
    if ($(this).css("background-image") != "none" ) ctBkImg++
}); 

---

您可以使用

计数器重置

和

计数器增量

使用CSS计数，并使用CSS计数项目

正文{
计数器复位：img；
}
img{
反增量：img；
内容：计数器（img）；
内容：“；
}
主分区：之后{
内容：“图像计数：”计数器（img）；
}

---

给出了一个新的答案，这个答案将找到具有特定背景的所有元素，并且可以针对具有背景或两个不同背景的所有项目进行修改

此外，您还可以修改字符串的长度，确保它不是空字符串，因此具有背景，然后对该元素进行计数

*JavaScript解决方案*

我想说，根据你所说的，尽管所有的元素都是你唯一的选择

var计数=0；
window.onload=函数（）{
var elems=document.body.getElementsByTagName（“*”）；
对于（变量i=0；i -1)
{
计数++；
}
}
警报（计数）；
};
p{
背景：url（'http://placehold.it/50x50');
}

试验

试验

试验

试验

是的，我认为您必须搜索所有元素，并根据元素的类型获取每个元素的图像

这是一个功能代码，它将为您提供IMG标签和其他常见位置（div、Ps等）内网页中的所有图像。您可以将搜索扩展到其他标记，甚至扩展到所有标记。它不会在SVG和其他放置图像的“非基本”形式中搜索：

var imageSearch = 
{
    image_array: {},
    valid_image_nodes: ["DIV", "P", "SECTION", "SPAN"],

    scan_for_valid_images: function(node) 
    {
        if (node.nodeType === 1) 
        {
            if (node.nodeName === "IMG") {
                this.image_array[node.getAttribute("src")] = true;
            }
            else
            {
                if (this.valid_image_nodes.indexOf(node.nodeName) !== -1) {
                    div_style = node.currentStyle || window.getComputedStyle(node, false);
                    if (div_style.backgroundImage !== "none") {
                        url = div_style.backgroundImage;
                        this.image_array[url.slice(4, url.indexOf(')'))] = true;
                    }
                }
            }
        }
        var children = node.childNodes;
        for (var i = 0; i < children.length; i++) {
            this.scan_for_valid_images(children[i]);
        }
    },

    get_image_array: function()
    {
        return Object.keys(this.image_array)
    }
}

imageSearch.scan_for_valid_images(document);
imageSearch.get_image_array()

var-imageSearch=
{
图像_数组：{}，
有效的\u图像\u节点：[“DIV”、“P”、“SECTION”、“SPAN”]，
扫描\u以查找\u有效图像：函数（节点）
{
if（node.nodeType==1）
{
如果（node.nodeName==“IMG”）{
this.image_数组[node.getAttribute（“src”）]=true；
}
其他的
{
if（this.valid\u image\u nodes.indexOf（node.nodeName）！=-1）{
div_style=node.currentStyle | | window.getComputedStyle（node，false）；
如果（div_style.backgroundImage！=“无”）{
url=div_style.backgroundImage；
this.image_数组[url.slice（4，url.indexOf（'））]=true；
}
}
}
}
var children=node.childNodes；
对于（变量i=0；i

尝试将其复制粘贴到此窗口的控制台中，以查看其操作。
某些浏览器可能具有光标属性的url请参见。SVG可以有“图像”元素。经过更多的思考/研究，似乎没有“在页面上获取所有图像”的方法，它只是将上述方法结合起来，根据图像的包含方式，以不同的方式查找图像：（但是没有简单的方法来检查CSS中的图像，对吧？谢谢你，但我真的不想寻找一大堆答案，这些答案都是关于查询页面上可能出现的各种类型的图像的方法。我有能力做到这一点，（或查找）所有这些都是单独的。好的答案应该是一个包罗万象的方法，解释这样的方法是不可能的，或者可能列出所有可以找到的不同类型的图像，并解释这些图像需要组合。谢谢你提供了令人敬畏和迷人的答案。我不知道我可以用CSS做到这一点。我想我可以使用一些聪明的属性包含css魔术，可以获得具有内联图像等的元素。然而，虽然这看起来很有用，但我正在寻找一个JS解决方案。@ZachL oh你评论了另一个关于css的答案，我一定是误解了。噢，我知道这可能会让人困惑。当我说“检查css中的图像”时我的意思是检查通过css应用的图像。比如
p{background:url（foo.png）；}
@ZachL-Gotcha！不添加任何其他类。好的。那么任何元素都有你想要计算的背景？或者任何背景？酷+有用的代码片段，但是
有效的\u图像\u节点
看起来相当随意。真的，任何元素上都可能有图像，那么为什么不直接避免整个
呢（此.valid\u image\u nodes…
条件？抱歉，我将此用于一个个人项目。您是对的，您应该包括