阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      jQuery imagesLoaded

      插件 jQuery.imagesloaded 中文 API 文档

      imagesLoaded

      检测何时加载图像。

      安装

      下载

      CDN

      <script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
      <!-- or -->
      <script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.js"></script>
      

      Install via : npm install imagesloaded

      Install via : bower install imagesloaded --save

      jQuery

      您可以使用 imagesLoaded 作为 jQuery 插件。

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

      .imagesLoaded() 返回 jQuery Deferred object. 这允许您使用 .always(), .done(), .fail().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 元素,NodeList,数组或选择器字符串
      • options Object
      • callback Function - 加载所有图像后触发的功能

      使用回调函数与将其绑定到 always 事件相同(请参见下文)。

      // 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() {...});
      

      使用 .on(), .off(), and .once() 方法将事件与 Vanilla JS 绑定。

      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 );
      

      背景

      除了之外,还检测何时加载了背景图片<img>

      设置 { background: true } 以检测何时加载了元素的背景图像。

      // 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');
      });
      

      CodePen 上的 jQuery demo or vanilla JS demo .

      设置为选择器字符串,例如 { background: '.item' } 检测何时加载了子元素的背景图像。

      // jQuery
      $('#container').imagesLoaded( { background: '.item' }, function() {
        console.log('all .item background images loaded');
      });
      
      // vanilla JS
      imagesLoaded( '#container', { background: '.item' }, function() {
        console.log('all .item background images loaded');
      });
      

      CodePen 上的 jQuery demovanilla JS demo.

      大事记

      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');
      });
      

      在加载所有图像或确认其损坏后触发。

      • instance imagesLoaded - imagesLoaded 实例

      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');
      });
      

      在成功加载所有图像而没有任何损坏的图像之后触发。

      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');
      });
      

      在所有图像都加载了至少一个损坏的图像后触发。

      progress

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

      加载每个图像后触发。

      • instance imagesLoaded - imagesLoaded 实例
      • image LoadingImage - 已加载图像的 LoadingImage 实例

      性质

      LoadingImage.img

      图片 - img 元素

      LoadingImage.isLoaded

      Boolean - true 成功加载图像时

      imagesLoaded.images

      每个检测到的图像的 LoadingImage 实例的数组

      var imgLoad = imagesLoaded('#container');
      imgLoad.on( 'always', function() {
        console.log( imgLoad.images.length + ' images loaded' );
        // detect which image is broken
        for ( var i = 0, len = imgLoad.images.length; i < len; i++ ) {
          var image = imgLoad.images[i];
          var result = image.isLoaded ? 'loaded' : 'broken';
          console.log( 'image is ' + result + ' for ' + image.img.src );
        }
      });
      

      Browserify

      imagesLoaded 与 Browserify 一起使用。

      npm install imagesloaded --save
      
      var imagesLoaded = require('imagesloaded');
      
      imagesLoaded( elem, function() {...} );
      

      使用.makeJQueryPlugin使使用.imagesLoaded()jQuery 插件。

      var $ = require('jquery');
      var imagesLoaded = require('imagesloaded');
      
      // provide jQuery argument
      imagesLoaded.makeJQueryPlugin( $ );
      // now use .imagesLoaded() jQuery plugin
      $('#container').imagesLoaded( function() {...});
      

      Webpack

      安装通过 npm 加载的图像。

      npm install imagesloaded
      

      然后可以 require('imagesloaded').

      // main.js
      var imagesLoaded = require('imagesloaded');
      
      imagesLoaded( '#container', function() {
        // images have loaded
      });
      

      使用.makeJQueryPlugin使.imagesLoaded()jQuery 插件。

      // main.js
      var imagesLoaded = require('imagesloaded');
      var $ = require('jquery');
      
      // provide jQuery argument
      imagesLoaded.makeJQueryPlugin( $ );
      // now use .imagesLoaded() jQuery plugin
      $('#container').imagesLoaded( function() {...});
      

      Run webpack.

      webpack main.js bundle.js
      

      RequireJS

      imagesLoaded 与 RequireJS.

      您可能需要 imagesloaded.pkgd.js.

      requirejs( [
        'path/to/imagesloaded.pkgd.js',
      ], function( imagesLoaded ) {
        imagesLoaded( '#container', function() { ... });
      });
      

      使用.makeJQueryPlugin使.imagesLoaded()jQuery 插件。

      requirejs( [
        'jquery',
        'path/to/imagesloaded.pkgd.js',
      ], function( $, imagesLoaded ) {
        // provide jQuery argument
        imagesLoaded.makeJQueryPlugin( $ );
        // now use .imagesLoaded() jQuery plugin
        $('#container').imagesLoaded( function() {...});
      });
      

      您可以使用Bower管理依赖项。设置baseUrlbower_components 并为所有的应用程序代码的路径配置。

      requirejs.config({
        baseUrl: 'bower_components/',
        paths: { // path to your app
          app: '../'
        }
      });
      
      requirejs( [
        'imagesloaded/imagesloaded',
        'app/my-component.js'
      ], function( imagesLoaded, myComp ) {
        imagesLoaded( '#container', function() { ... });
      });
      

      浏览器支持

      • IE9+
      • Android 2.3+
      • iOS Safari 4+
      • 所有其他现代浏览器

      使用 imagesLoaded v3 获得IE8支持。

      MIT License

      imagesLoaded is released under the MIT License. Have at it.

      Github

      https://github.com/desandro/imagesloaded

      卖前端学习教程

      只需几十元,就能买到培训班的内部教程!开启高薪之路!

      零基础小白阿里P7的教程都有!

      同时长期收购所有培训班的前端教程

      目录
      目录