Question

例如，我有一个imageslider插件。

<div class="images">
    <img src="1.jpg"/>
    <img src="2.jpg"/>
    .... 
</div>
$('.images').slider();

如何在插件（任何骨架）中指定我只想在加载所有图像时启动插件？是这样的，例如使用.load（）方法并在每次加载图像时添加到变量。一旦它达到图像总数，请调用插件？但我怎么能'暂停'这个插件呢？

谢谢大家，但我确实提到了一个骨架jquery插件本身，如何在图片加载后调用插件？

Answer 1

$(window).load(function() {
  $('.images').slider();
});

$(window).load将等到所有图片都加载到页面上。

如果您需要知道图片何时加载到该特定div中，请参阅此问题中的答案：How to know when all images inside a specific "div" are loaded?

Answer 2

你可以在window.load event上执行插件，如下所示：

$(window).load(function () {
  $('.images').slider();
});

这与更常用的document.ready事件相反：

$(document).ready(function () {
  $('.images').slider();
});

关键区别在于后者将在DOM完成加载时执行，而前者将等待，直到加载DOM引用的所有资源。请注意，如果其他资源即使在映像准备就绪后也需要很长时间才能加载，那么它会在插件加载或超时之前保留该插件。

Answer 3

你可以尝试这个，它将在加载所有图像后初始化插件。

$(function(){
   var imageCount = $(".images img").length;
   $(".images img").load(function(){
       imageCount--;
       if(imageCount == 0){
          $(this).parent().slider();
       }
   });
});

Answer 4

要检查该元素中的所有图像有点棘手，但可以完成。

//gather the total number of images
var imageNum = $('.images').find('img').length;
var imagesLoaded = 0;
//setup a load event for each img
$('.images img').each(function(){
    //load event will fire inconsistently in IE/FF so we create a new dom element but don't insert it
    $('<img>').load(function(){
        imagesLoaded++;
        //all images are loaded so fire the slider
        if(imagesLoaded == imageNum){
            $('.images').slider();
        }
    //we set the new img to have the src of the current image
    }).attr('src', $(this).attr('src'));
});

它有点笨重但应该有用。

检查jquery插件启动之前是否加载了图像

4 个答案: