Question

我正在尝试使用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。

Answer 1

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

为了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。

中保存初始上下文

Answer 2

你可能认为这是一个艰难的方式，但请相信我不是：如果你想使用jQuery load Event for images让我告诉你一个事实：“那是一个SHIT”所以你应该使用：

.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 享受：））

未调用JavaScript Image onload

2 个答案: