如何多次触发或调用jquery加载函数？

Question

我需要一点帮助。我正在为一些问题苦苦挣扎一段时间。每次单击按钮时，我都需要调用 jquery 加载函数。要触发加载功能，我想我需要刷新该特定 div 或再次加载该 div。

我的目标是：

当我单击按钮时，我希望显示 loading-div 并希望 .image-container 再次加载。我想这应该会触发 jquery 加载函数，该函数将在 .image-container 加载时隐藏 loading-div。

这是我的代码：

$(".image-container").load(function(){
   $( "#loading-div" ).hide();
});

$("#button").on('click', function(){
   $( "#loading-div" ).show();
   $(".image-container").load("index.php"); // load again div that sholud trigger upper function
});

Answer 1

试试这个

$("#button").on('click', function(){
    $( "#loading-div" ).show();
    $(".image-container").load("index.php", function () {
        $( "#loading-div" ).hide();
    });
});

Answer 2

假设我想将数据从服务器连续加载到特定的 div 标签。 为此，我使用 setinterval jquery 方法。 示例：

setinterval(function(){
$("div1").load("url","data you want to send to your  server");                      
                      },1000); 

注意：加载方法仅适用于'get'方法。在上面的代码中，加载的第二个参数是可选的。

Answer 3

嗯，只需将所需的预加载/加载后逻辑与处理程序分开？

function loadSome(el, data) {
   $("#loading-div").show();
   el.load(data, function () {
     $("#loading-div").hide();
   });
}

function loadImage() {
    loadSome($(".image-container"), "index.php");
}

loadImage();
$("#button").on('click', function(){
    loadImage();
});

或者更多jQuery-way:

jQuery.fn.progressedLoad = function (data, progressElement) {
    $(progressElement).show();
    // add more complex load-progress logic here...

    return this.load(data, function() {
        $(progressElement).hide();
    });
}

...

$(".image-container").progressedLoad(
    {"url": "index.php"}, 
    $("#loading-div")
);