Question

我正在使用Semantic Ui和jQuery制作相册。我想编写一个在加载<dependency> <groupId>com.fasterxml.jackson.datatype</groupId> <artifactId>jackson-datatype-jsr310</artifactId> <version>2.9.7</version> </dependency>中的所有图像时被调用的函数。

有一张封面div class="images"，其中覆盖了所有图像。装入所有图像后，应取下盖子。

如何确定何时已加载所有图像，以便可以取下封面？

这是我到目前为止的代码：

div class="dimmer"

谢谢！

Answer 1

[[0, 2], [1, 3], [4, nil]]

Answer 2

您可以在窗口加载事件上隐藏封面，该事件将在加载所有图像后触发。

$(window).on('load', function(e){
   $('.cover').hide();
});

Answer 3

已编辑！我发现它无法像我提供的那样工作，所以我进行了完整的编辑，提出了它的工作方式。我认为最好的方法是使用Promises。这将确保即使偶数都被遗漏了，因为在事件触发后附加了处理程序，我们将能够获得其作为失败成功的结果。由于缓存的图像和/或异步处理，其他方式可能会失败。这就是承诺的成因。

运行下面的代码片段进行检查：

$(function(){

  function load(img) {
    return new Promise(function(resolve, reject) {
      img.onload = function() {
          console.log(img);
          resolve('OK');
      };
      img.onerror = function() {
        reject(Error("Loading error"));
      };
    });
  }

  var all = $.map($('#image1 img').get(), function(item) { return load(item); });
  Promise.all(all).then(function() {
    console.log('All loaded');
  }, function() {
    console.log('One or more failed');
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="image1">
  <img src="https://shop.r10s.jp/book/cabinet/5963/4988064935963.jpg?v=30">
  <img src="https://images-na.ssl-images-amazon.com/images/I/816L51ge55L._SL1202_.jpg?v=30">
  <img src="https://img-shop.mu-mo.net/img/pc_sp/aaa2018_m2th4i/header01.jpg?v=30">
  <img src="https://img-shop.mu-mo.net/img/pc_sp/aaa2018_m2th4i/header01.jpg?v=30">
</div>

Answer 4

您不需要jQuery。现代Javascript提供了处理该功能的惯用方式，是普通jQuery功能的更好替代品。

重要：目前there is no 100% reliable way of detecting when images in the HTML have finished loading。

因此，最可靠的方法是动态创建图像元素并使用'load'事件。您还可以回退到“文档”上的“加载”事件，该事件将在加载页面上的所有资源时触发。

例如，以下代码在加载完所有图像后将删除dimmer div，并且对window.onload进行后备操作以删除即使有任何错误也会触发的调光器： / p>

const loader = document.getElementById('loader1');
const container = document.getElementById('image1');
const imageURLs = [
  "https://lorempixel.com/48/48/abstract/1/",
  "https://lorempixel.com/48/48/abstract/2/",
  "https://lorempixel.com/48/48/abstract/3/",
  "https://lorempixel.com/48/48/abstract/4/",
  "https://lorempixel.com/48/48/abstract/5/",
  "https://lorempixel.com/48/48/abstract/6/",
  "https://lorempixel.com/48/48/abstract/7/",
  "https://lorempixel.com/48/48/abstract/8/",
];

// Fallback handler that will run when everything has loaded.
window.addEventListener('load', onDocumentLoaded);

// Create images from list of sources
const images = imageURLs.map(src => {
  const image = new Image();

  // Return a promise for the loaded image.
  return new Promise((resolve, reject) => {
    // resolve when loaded
    image.addEventListener('load', () => {
      console.log(`image loaded ${src}`);
      resolve();
    });
    // reject on error
    image.addEventListener('error', (err) => {
      console.log(`error loading ${src}`);
      reject(err);
    });
    
    // Once the handlers are set, set the src and add the images to the DOM.
    image.src = src;
    container.appendChild(image);
  });
});

// Act once all promises are resolved:
Promise.all(images)
  .then(onAllImagesLoaded)
  .catch(e => {
    console.log('something went wrong.');
  });

// All images have been loaded -- success case.
function onAllImagesLoaded() {
  console.log('all images loaded');
  loader.remove();
}

// Everything finished loading -- fallback and error cases.
function onDocumentLoaded() {
  console.log('all content loaded');
  loader.remove();
}

<html>

<head></head>

<body>
  <div id="loader1" class="ui active dimmer">
    <div class="ui text loader">Loading...</div>
  </div>
  <div id="image1" class="ui small images">
  </div>
</body>

</html>

检测何时加载图像列表

4 个答案: