Question

我在下面的帖子中搜索了一个解决方案，但我使用了不同的方法 Javascript - wait images to be loaded

基本上：1）我做一个AJAX请求并等待答案。 2）答案是图片的URL，我把这张图片覆盖了前一张图片。这有效：

//ON AJAX RESPONSE
{
    //Here I get var newPicture from AJAX.
    $.("#newPic").setAttribute("src", newPicture); //This is working

    openCrop(); //This is my function that will trigger jCrop in the picture
}

openCrop（）在localhost中工作，因为图像会立即加载。但不适用于网络。因为我必须等到图像加载，然后触发函数openCrop（）。

我该怎么做？

Answer 1

您可以使用.load：

$("#newPic").setAttribute("src", newPicture).load(openCrop);

这将在图像加载完成后调用openCrop函数。

Fiddle

Answer 2

你可以使用图像的onload事件，如：

$.("#newPic").setAttribute("src", newPicture);
$.("#newPic").onload(function() {
    //image loaded, call the function
    openCrop();
});

Answer 3

如果您使用的是jQuery，则必须使用load() - 函数来监听onload事件。

$('#newPic').load( function(){
    openCrop();
});

如果您正在使用vanilla JS，您可以执行以下操作：

var img = new Image();
    img.src = 'newsrc.png';
    img.onload = function(){
        openCrop();
    };

这样它会一直等到Image加载后再执行操作。

Answer 4

以下对我有用：

    pics = 0;
    
    $(document).ajaxComplete(function(){
    
    $('img').load( function(){
    pics++;
    if(pics > 9){
     console.log("ten pictures loaded")
     openCrop()
    }
    });
    
    });

我认为 .load 事件需要包含在类似 .ajaxComplete 事件中。除非页面上存在元素，否则 jQuery 不会理解发生了什么。使用标准 $(document).ready 事件的原因相同。

等待AJAX响应后加载图像

4 个答案:

等待AJAX​​响应后加载图像

4 个答案:

等待AJAX响应后加载图像