如何使用 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++
});