未调用 JavaScript 图像加载答案

【问题标题】：JavaScript Image onload not called未调用 JavaScript 图像加载
【发布时间】：2013-06-11 02:42:18
【问题描述】：

我正在尝试使用 Javascript 在 Canvas 上绘制图像，但我当然想等到图像加载完毕。但是，我的 onload 函数似乎从未被调用过。

这是我尝试过的：

function GameObject(x, y)
{
    this.x = x;
    this.y = y;
    this.image = {};
    this.loaded = false;

    this.load = function(filename)
    {
        this.image = new Image();
        this.image.onload = function()
        {
            alert("image loaded");
            this.loaded = true;
        };
        this.image.src = filename;
    };
};

我这样调用加载函数：

$( document ).ready(function()
{
    main();
});

var player = new Player(0, 0);

function main()
{
    player.load("images/player.png");
};

并且 Player 继承自 GameObject。

使用 FireBug 时，看起来图像已加载，但从未显示“图像已加载”警报，并且 this.loaded 仍然为 false。

可能出了什么问题？

编辑：图像现在已加载（路径名有错误），但 this.loaded 在调用警报时从未设置为 true。

【问题讨论】：

我们能看到更多代码吗？您是否检查了文件名并收到了图像？
文件名正确。我将如何检查它是否已收到？我将用更多代码编辑我的帖子。
解决方案是查看浏览器开发者工具中的网络选项卡。
添加onerror事件，看是否触发。
@karaxuna 即使图像被缓存，也会调用加载事件。

标签： javascript html image canvas

【解决方案1】：

您可能认为这是一种艰难的方式，但相信我并非如此：如果你想对图像使用 jQuery 加载事件，让我告诉你一个真相：“那是个屁”，所以你应该使用：

.imagesLoaded()

但是在使用之前你应该先下载它here 下载后执行以下步骤：

将您的 .imagesLoaded() 库 js 文件附加到您的第一个代码中，就像您对主 jQuery.js 所做的那样

为您要检查是否已加载的图像编写此代码：

$('#container').imagesLoaded()
.always( function( instance ) {
 console.log('all images loaded');
})
.done( function( instance ) {
console.log('all images successfully loaded');
})
.fail( function() {
console.log('all images loaded, at least one is broken');
})
.progress( function( instance, image ) {
var result = image.isLoaded ? 'loaded' : 'broken';
console.log( 'image is ' + result + ' for ' + image.img.src );
});

在代码中放你图片的地址而不是#container 享受:))

【讨论】：

【解决方案2】：

您应该在player.image 对象中查找loaded 字段。

为了将loaded 分配给player 对象，您应该像这样重写部分代码：

this.load = function(filename)
{
    var self = this;
    this.image = new Image();
    this.image.onload = function()
    {
        alert("image loaded");
        self.loaded = true;
    };
    this.image.src = filename;
};

问题在于，当 onload 被调用时，context（this 的点）就是 image 对象。因此，您必须将初始上下文保存在 self 中。

【讨论】：