檢查jquery插件啓動前是否加載了圖像

例如，我有一個imagelider插件。檢查jquery插件啓動前是否加載了圖像

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

我怎樣才能指定插件（任何骨架），我只想在所有圖像加載時啓動插件？是否像使用.load（）方法並在每次加載圖像時添加到變量中。然後，一旦它達到圖像總數，請調用插件？但是，我怎麼能'暫停'插件？

謝謝大家，但我提到了一個骷髏jquery插件本身，圖像加載後我將如何調用插件？

來源

2011-09-06 tamade

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

$(window).load將等待所有圖像加載到頁面上。

如果你需要知道的圖像時，在那個特定的DIV已經完成加載，請參閱回答這樣一個問題：How to know when all images inside a specific "div" are loaded?

來源

2011-09-06 17:45:00 VNO

這將等待頁面上的所有*圖像。 OP想知道'.images'裏面的圖像何時加載。 –

謝謝，但有沒有辦法，我可以指定這在插件？ – tamade

我對這個特別的插件不熟悉。看看他們的文檔。 – VNO

您可以在window.load event執行插件像這樣：

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

這是因爲相對於更常用document.ready事件：

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

的關鍵差異這意味着後者將在DOM完成加載時執行，而前者將等到DOM引用的所有資源都加載完畢。請注意，如果其他資源即使在圖像準備就緒後也需要很長時間才能加載，那麼它會阻塞插件直到它加載或超時。

來源

2011-09-06 17:47:42 David

你可以嘗試這個，它會在所有的圖像加載後初始化插件。

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

來源

2011-09-06 17:50:06 ShankarSangoli

要檢查那個元素中的所有圖像有點棘手，但可以完成。

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

這有點笨重，但應該工作。

來源

2011-09-06 17:58:08 Jeremy

檢查jquery插件啓動前是否加載了圖像

回答

相關問題