JavaScript是一种高级编程语言，可以用于开发Web应用程序。其中一个常见功能是计算页面上加载的图片数量。在本篇文章中，我将为您介绍如何使用JavaScript计算页面上所有图片的数量，并给出具体的例子。
首先，让我们看看如何使用JavaScript获取页面中的图片列表。有两种方法可以做到这一点：一种是使用DOM API，另一种是使用jQuery库。
使用DOM API可以使用Document对象的images属性。这个属性返回一个HTMLCollection对象，其中包含了所有的图片元素。下面是一个例子：

<code>var images = document.images;
console.log("页面上有 " + images.length + " 张图片。");
</code>

上面的代码将打印出页面上所有图片的数量。
如果你想使用jQuery，这也是非常容易的。使用jQuery选择器可以选择所有图片元素。下面是一个例子：

<code>var images = $("img");
console.log("页面上有 " + images.length + " 张图片。");
</code>

这里，我们使用jQuery选择器选择了所有图片。结果与前面使用DOM API得出的结果相同。
但是，并不是所有的图片都被加载了。有时候，我们需要检查哪些图片已经加载完成，哪些还在加载中。有时候我们可能需要等到所有的图片都被加载完毕才能继续运行代码。所以，让我们看看如何判断图片是已经加载完成了。
当图片已经加载成功时，可以使用onload事件处理程序来处理。下面是一个例子：

<code>var images = document.images;
var count = 0;
for (var i = 0; i < images.length; i++) {
images[i].onload = function() {
count++;
console.log("已加载 " + count + " 张图片。");
};
}
</code>

在上面的代码中，我们使用循环为每个图片元素设置了一个onload事件处理程序。每当一个图片成功加载时，将count变量加1并将统计结果打印到控制台。
还有另一种情况需要考虑。有时我们也需要检查那些图片加载失败了。当图片加载失败时，可以使用onerror事件处理程序来处理。下面是一个例子：

<code>var images = document.images;
var count = 0;
for (var i = 0; i < images.length; i++) {
images[i].onload = function() {
count++;
console.log("已加载 " + count + " 张图片。");
};
images[i].onerror = function() {
console.log("图片加载失败！");
};
}
</code>

在上面的代码中，我们为每个图片元素同时设置了两个事件处理程序：一个是onload，另一个是onerror。每当一个图片加载失败时，我们就会得到“图片加载失败！”的消息。
最后，我们可以使用以上的知识来计算页面上已经加载的图片数量。使用一个计数器变量，在onload事件处理程序中将计数器加1即可。下面是一个例子：

<code>var images = document.images;
var count = 0;
for (var i = 0; i < images.length; i++) {
images[i].onload = function() {
count++;
if (count == images.length) {
console.log("所有 " + count + " 张图片已经加载完成！");
}
};
}
</code>

在上面的代码中，我们使用一个计数器变量来计算已经加载的图片数量。每当一个图片成功加载时，我们就将计数器加1。当计数器等于图片数量时，我们就能确定所有图片已经加载完成，并打印结果。