Question

我懒得在页面上加载6张图片，我想在这个页面上打印图像但是我需要先加载所有图像：这是用这个来完成的：

＆＃13;

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

＆＃13;

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

有什么想法吗？

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加载了所有图像

1 个答案: