Kiểm tra hình ảnh đã được tải với thư viện imagesLoaded (ok)

https://imagesloaded.desandro.com/

jQuery

You can use imagesLoaded as a jQuery Plugin.

$('#container').imagesLoaded( function() {
  // images have loaded
});
// options
$('#container').imagesLoaded( {
  // options...
  },
  function() {
    // images have loaded
  }
);

.imagesLoaded() returns a jQuery Deferred object. This allows you to use .always(), .done(), .fail() and .progress().

$('#container').imagesLoaded()
  .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 );
  });

Vanilla JavaScript

You can use imagesLoaded with vanilla JS.

imagesLoaded( elem, callback )
// options
imagesLoaded( elem, options, callback )
// you can use `new` if you like
new imagesLoaded( elem, callback )

  • elem Element, NodeList, Array, or Selector String

  • options Object

  • callback Function - function triggered after all images have been loaded

Using a callback function is the same as binding it to the always event (see below).

// element
imagesLoaded( document.querySelector('#container'), function( instance ) {
  console.log('all images are loaded');
});
// selector string
imagesLoaded( '#container', function() {...});
// multiple elements
var posts = document.querySelectorAll('.post');
imagesLoaded( posts, function() {...});

Bind events with vanilla JS with .on(), .off(), and .once() methods.

var imgLoad = imagesLoaded( elem );
function onAlways( instance ) {
  console.log('all images are loaded');
}
// bind with .on()
imgLoad.on( 'always', onAlways );
// unbind with .off()
imgLoad.off( 'always', onAlways );

Background

Detect when background images have loaded, in addition to <img>s.

Set { background: true } to detect when the element's background image has loaded.

// jQuery
$('#container').imagesLoaded( { background: true }, function() {
  console.log('#container background image loaded');
});

// vanilla JS
imagesLoaded( '#container', { background: true }, function() {
  console.log('#container background image loaded');
});

See jQuery demo or vanilla JS demo on CodePen.

Ví dụ 1:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" type="text/css" href="style.css">
  <script src="https://code.jquery.com/jquery.js"></script>
  <script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
</head>

<body>
  <h1>imagesLoaded - background</h1>
  <p class="status">&nbsp;</p>
  <div class="box box1"></div>
  <div class="box box2"></div>
  <div class="box multi1"></div>
  <div class="box box4"></div>
  <div class="box box5"></div>
  <div class="box multi2"></div>
  <script type="text/javascript">
  jQuery(document).ready(function($) {
    var $status = $('.status');
    $('.box').imagesLoaded({
      background: true
    }, function(imgLoad) {
      $status.text(imgLoad.images.length + ' images loaded checking backgrounds');
    });
  });
  </script>
</body>

</html>

Events

always

// jQuery
$('#container').imagesLoaded().always( function( instance ) {
  console.log('ALWAYS - all images have been loaded');
});

// vanilla JS
imgLoad.on( 'always', function( instance ) {
  console.log('ALWAYS - all images have been loaded');
});

Triggered after all images have been either loaded or confirmed broken.

  • instance imagesLoaded - the imagesLoaded instance

done

// jQuery
$('#container').imagesLoaded().done( function( instance ) {
  console.log('DONE  - all images have been successfully loaded');
});

// vanilla JS
imgLoad.on( 'done', function( instance ) {
  console.log('DONE  - all images have been successfully loaded');
});

Triggered after all images have successfully loaded without any broken images.

fail

$('#container').imagesLoaded().fail( function( instance ) {
  console.log('FAIL - all images loaded, at least one is broken');
});

// vanilla JS
imgLoad.on( 'fail', function( instance ) {
  console.log('FAIL - all images loaded, at least one is broken');
});

Triggered after all images have been loaded with at least one broken image.

progress

imgLoad.on( 'progress', function( instance, image ) {
  var result = image.isLoaded ? 'loaded' : 'broken';
  console.log( 'image is ' + result + ' for ' + image.img.src );
});

Triggered after each image has been loaded.

  • instance imagesLoaded - the imagesLoaded instance

  • image LoadingImage - the LoadingImage instance of the loaded image

PreviousVí dụ Sử dụng sẵn thư viện masonry của wordpres (ok)NextSử dụng pre_get_posts và $query->set('meta_key'), $query->set('meta_value') (ok)

Last updated

Was this helpful?