加載圖片後繼續功能

Question

我是JS的初學者。我有一個函數來延遲加載bootstrap輪播中的圖像。如何在圖像加載後繼續執行此功能？

$("#slider").on("slid.bs.carousel", function() 
{ 
    var nextItem = $("#slider").find("div.active").next(".item"); 
    if(!nextItem.length) 
    { 
     nextItem = $(".active.item").siblings(":first"); 
    } 
    var nextImage = nextItem.find("img"); 
    if(nextImage.hasClass("lazy-load")) 
    { 
     var src = nextImage.attr("data-src"); 
     nextImage.removeClass("lazy-load"); 
     nextImage.attr("src", src); 
    } 

    //the following code must be executed after nextImage is loaded: 

    clearTimeout(t); 

    $("#slider").carousel("pause"); 

    var duration = $(this).find("div.active").attr("data-interval"); 
    t = setTimeout(function() { $("#slider").carousel({interval: 1000}); }, duration-1000); 
}); 

Answer 1

只是等待onload事件：

$("#slider").on("slid.bs.carousel", function() 
{ 
    var that = this; 
    var nextItem = $("#slider").find("div.active").next(".item"); 
    if(!nextItem.length) 
    { 
     nextItem = $(".active.item").siblings(":first"); 
    } 
    var nextImage = nextItem.find("img"); 
    if(nextImage.hasClass("lazy-load")) 
    { 
     var src = nextImage.attr("data-src"); 
     nextImage.removeClass("lazy-load"); 
     nextImage.attr("src", src); 
    } 

    //the following code must be executed after nextImage is loaded: 
    $(nextImage).on("load",function(){ 
     clearTimeout(t); 

     $("#slider").carousel("pause"); 

     var duration = $(that).find("div.active").attr("data-interval"); 
     t = setTimeout(function() { $("#slider").carousel({interval: 1000}); }, duration-1000); 
    }); 

});