Javascript / jQuery：检测每张图片何时加载

Question

我正在为我的网站创建一个加载栏，我想在每次加载图像时更新加载进度 (%)。出于测试目的，我使用了 console.log()（而不是更新我的加载栏）。

我想检测每张图片何时加载。我的图片都在<div id='images>

之内

经过 5 小时的搜索，我还没有找到有效的解决方案。我是 jQuery 和 Javascript 的新手，所以我可能使用了不正确的语法（例如没有正确定位 image 容器，但我不确定。

我试过 imagesloaded jQuery 插件，但是在使用 $('#images').imagesLoaded() 时，imagesloaded 说所有图片都已加载，但实际上并没有。（我正在使用两张 4k 图像进行测试，因此我可以看到图像加载缓慢）。

我用来测试的imagesloadedjQuery代码(loadProgress.js):

$('#images').imagesLoaded() //My images are within "<div id='images></div>"
  .always( function( instance ) {
    console.log('all images loaded');
  })
  .done( function( instance ) {
    console.log('all images successfully loaded');
  })
  .fail( function() {
    console.log('all images loaded, at least one is broken');
  })
  .progress( function( instance, image ) {
    var result = image.isLoaded ? 'loaded' : 'broken';
    console.log( 'image is ' + result + ' for ' + image.img.src );
  });

// Code I used to keep track of when the page actually loaded
console.log('Page load started')
window.onload = function() {
    console.log('Page load complete')

我的 HTML（图片仅供测试，可能受版权保护）[只是一个片段，不包括 doctype、body 等]:

<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
<script scr="loadProgress.js"></script>
<div style="text-align:center" id="images">
  <img src="https://wallpapers.gg/wp-content/uploads/2018/01/Old-Lion-4K.jpg" alt="Lion 4K" id='image' />
  <img src="https://images7.alphacoders.com/383/383230.jpg" alt="Lion 4K" id="image" />
</div>

控制台输出[评论]：

Page load started
all images loaded
all images successfully loaded
[a good 5 second delay]
Page load complete

输出看起来很有希望，因为图像据说要在页面加载开始后加载，但是有 5 秒的延迟在 all images successfully loaded 和 Page load complete 之间，我可以看到图像从上到下缓慢呈现，还可以在我的浏览器选项卡中看到旋转的加载图标（表示图像尚未加载，因为有没有其他 html 加载）。 我认为插件没有正确检测到 images 容器。

我如何（最好是自动地，不必为每个图像分配一个唯一的 ID，并让它们一起被发现）检测每个单独的图像何时加载？

我希望我的控制台输出是（例如两张图片）：

Page load started
Image loaded
Image loaded
[no delay]
Page load complete

我不想检测何时加载了所有图像，而是特别想在每次加载图像时重复一个操作。在这种情况下，操作将是 console.log('Image loaded')

使用 Javascript 或 jQuery 都不是问题，如果您知道可以更有效地实现此目的的插件，我很想知道。

Answer 1

我不确定您使用的 jQuery 插件，但您可以为每个要加载的图像注册一个 "onload" 函数。不需要额外的 plugins/libraries，简单的 JavaScript 应该没问题。理想情况下，您应该在后端而不是前端执行此操作，因为在您分配 "onload" 函数时图像可能已经加载（想想浏览器缓存）。如果您想要定位每个图像，只需使用 $('img') 作为您的选择器。如果没有，请以他们的容器元素为目标，这样你就可以开始了。

Javascript / jQuery：检测每张图片何时加载

Javascript / jQuery: Detect when each individual image loads

html

javascript

jquery

detect