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

Question

使用 JavaScript 在页面上获取<img>元素很简单：

• document.images
• document.getElementsByTagName('img')

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

我考虑过使用querySelectorAll('*')遍历所有元素并检查它们的style.background和style.backgroundImage属性的url ，然后将其与 html 图像元素结合。

那是我唯一的选择吗？ 那会抓住一切吗？ 我想有一些边缘情况，图像由 JavaScript 加载，新的 HTML5 图像元素（图片，...）。

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

Answer 1

做了一个新的答案，这个答案会找到所有具有特定背景的元素，并且绝对可以针对具有背景或几个不同背景的所有项目进行修改。

您也可以修改字符串的长度，确保它不是空字符串，因此具有背景，然后计算该元素。

* JavaScript 解决方案 *

我会说，尽管所有元素都是您所说的唯一选择。

 var count = 0; window.onload = function () { var elems = document.body.getElementsByTagName("*"); for(var i = 0; i < elems.length; i++) { var properties = (elems[i].currentStyle || window.getComputedStyle(elems[i], false)); background = properties.backgroundImage.slice(4, -1); if(background.indexOf("http://placehold.it/50x50") > -1) { count++; } } alert(count); };

 p { background: url('http://placehold.it/50x50'); }

 <div class="main"> <p>Test</p> <p>Test</p> <p>Test</p> <p>Test</p> </div>

Answer 2

是的，我认为您必须搜索所有元素并为每个元素获取其图像，具体取决于元素的类型。

这是一个功能代码，它将为您提供 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()

尝试将其复制粘贴到此窗口的控制台中以查看其运行情况。

Answer 3

您可以使用 CSS 计数，使用counter-reset和counter-increment并使用 CSS 计数项目。

 body { counter-reset: img; } img { counter-increment: img; content:counter(img); content:""; } div.main:after { content: "Images Counted: " counter(img); }

 <div class="main"> <img src="http://placehold.it/50x50"> <img src="http://placehold.it/50x50"> <img src="http://placehold.it/50x50"> <img src="http://placehold.it/50x50"> <img src="http://placehold.it/50x50"> </div>

但是，要计算您想要的所有项目，您可以：

 body { counter-reset: count; } img { counter-increment: count; content:counter(count); content:""; } p:before { counter-increment: count; content:counter(count); content:""; } h1:before { counter-increment: count; content:counter(count); content:""; } div.main:after { content: "Items Counted: " counter(count); }

 <div class="main"> <img src="http://placehold.it/50x50"> <img src="http://placehold.it/50x50"> <img src="http://placehold.it/50x50"> <img src="http://placehold.it/50x50"> <img src="http://placehold.it/50x50"> <p> This paragraph is also counted </p> <h1> This header 1 is also counted </h1> </div>

如果需要，您还可以将此信息放在隐藏的div并稍后提取。

这里有一些可供参考： http : //www.webdesignerdepot.com/2013/05/learn-to-count-with-css/

Answer 4

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

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

Answer 5

使用 jquery，你可以使用这样的东西作为计数器 backgroundImage

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