Question

使用JavaScript获取<img>元素在页面上是微不足道的：

document.images
document.getElementsByTagName('img')

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

我考虑使用querySelectorAll('*')循环遍历所有元素并检查style.background的{{1}}和style.backgroundImage属性，然后将其与html图像元素相结合。

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

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

Answer 1

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

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

* 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，P等）中为您提供所有图像。您可以将搜索范围扩展到其他标记，甚至扩展到所有标记。它不会在SVG和其他＆＃34; 非基本＆＃34;中搜索。放置图像的形式：

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

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

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

Answer 4

使用jquery你可以使用这样的东西来反击backgroundImage

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

Answer 5

您可以使用counter-reset和counter-increment计算CSS，并使用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/

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

5 个答案: