时间戳

首页 > 解决方案 > Javascript / jQuery：检测每个图像何时加载

javascript - Javascript / jQuery：检测每个图像何时加载

问题描述

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

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

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

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

imagesloaded我用于测试的jQuery 代码（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 都不是问题，如果您知道可以更有效地实现这一目标的插件，我很想知道。

标签： javascriptjqueryhtmldetect

解决方案

我不确定您正在使用的 jQuery 插件，但您可以为要加载的每个图像注册一个“onload”函数。不需要额外的插件/库，纯 JavaScript 应该没问题。理想情况下，您会在后端而不是前端执行此操作，因为在您分配“onload”功能时，图像可能已经加载（想想浏览器缓存）。如果您想定位每个图像，只需使用$('img')作为您的选择器。如果没有，请定位他们的容器元素，你应该很高兴。

推荐阅读