加载图像后继续功能

Continue function after load image

本文关键字：功能 继续 图像 加载      更新时间：2023-09-26

我是JS的初学者。我有一个函数来延迟加载图像在引导旋转木马。如何在加载图像后继续此功能?

$("#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);
});

等待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);
    });
});
相关文章：