使用 unveil.js 检查是否所有图像都已加载

Question

我懒得在一个页面上加载 6 张图片，我想打印此页面上的图片，但我需要先强制加载所有图片：这样做完成了：

$("img").trigger("unveil");

我只希望在加载完所有图像后显示打印对话框。

有什么想法吗？

Answer 1

您可以通过一些 jQuery 和 load 事件来完成此操作：

jQuery( document ).ready(function($) {

  var imageContainer = $('#imagecontainer');
  var numImages = $('img', imageContainer).length;
  var numImagesLoaded = 0;

  $('img', imageContainer).on('load', function() {
      numImagesLoaded++;
      if (numImagesLoaded == numImages) {
          runAfterAllImagesLoaded();
      }
  });

  function runAfterAllImagesLoaded()
  {
      alert('hello');
  }
});

下面是一个示例，它使用 delay.me 以随机速度加载图像，然后在加载后显示警告：

(also a fiddle since the inline example doesn't show it that well)

jQuery( document ).ready(function($) {

  var imageContainer = $('#imagecontainer');
  var numImages = $('img', imageContainer).length;
  var numImagesLoaded = 0;

  $('img', imageContainer).each(function() {
     var showtimetime = Math.floor(Math.random()*(5000-1000+1)+1000);
     $(this).attr('src', 'http://deelay.me/' + showtimetime + '/https://placekitten.com/400/200')
  });

  $('img', imageContainer).on('load', function() {
      numImagesLoaded++;
      if (numImagesLoaded == numImages) {
          runAfterAllImagesLoaded();
      }
  });

  function runAfterAllImagesLoaded()
  {
      alert('hello');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="imagecontainer">
  <img src="" alt="">
  <img src="" alt="">
  <img src="" alt="">
  <img src="" alt="">
</div>

使用 unveil.js 检查是否所有图像都已加载

Check if all images are loaded using unveil.js

javascript

jquery

lazy-loading