Question

我正在使用

创建新图像

img = new Image();
img.src = image_url;

然后我将img.src分配给DOM

中的img标签的src

$("#my_img").attr("src", img.src);

我怎么知道img.src已100％加载？什么是最佳做法？ img.complete在某些浏览器中似乎对我来说很小。

因此，换句话说，我需要在img.src 100％加载之后将$("#my_img")分配给img。

谢谢！

Answer 1

使用load事件：

img = new Image();

img.onload = function(){
  // image  has been loaded
};

img.src = image_url;

另请看：

Preloading and the JavaScript Image() object

Answer 2

使用Promise模式：

public async Task Run()
{
    Console.WriteLine("Main start");
    await getTask1();
    Console.WriteLine("Main 2");
    var task2 = getTask2(); //construct asynchronous action
    Console.WriteLine("Main 3");
    await Task.Run(task2); //execute the asynchronous action
    Console.WriteLine("Main end");
}

在调用函数时，我们可以非常巧妙地处理它的响应或错误。

function getImage(url){
        return new Promise(function(resolve, reject){
            var img = new Image()
            img.onload = function(){
                resolve(url)
            }
            img.onerror = function(){
                reject(url)
            }
            img.src = url
        })
    }

新的Image（），如何知道图像是否100％加载？

2 个答案: