Question

我正在尝试构建一个简单的图像预加载，它会创建一个图像元素并存储它，以便我以后可以立即使用它。

我已经设置了这个相当简单的单例类，我可以在任何地方使用它：

var Preloader = (function() {
var instance = null;

function PrivateConstructor() {
    var total = 0;
    var onComplete = null;

    this.loadImages = function(images, completeHandler) {
        total = images.length;
        onComplete = completeHandler;

        for(var i = 0; i < images.length; i++) {
            var img = new Image();
            img.onLoad = this.onLoad(img);
            img.src = images[i];
        }
    }

    this.onLoad = function(img) {
        console.log(img);
        console.log(img.width);
        console.log(img.height)
        total--;

        if(total == 0) onComplete();
    }
}

return new function() {
    this.getInstance = function() {
        if (instance == null) {
            instance = new PrivateConstructor();
            instance.constructor = null;
        }
        return instance;
    }
}
})()

现在当我使用它并检查我的宽度和高度时，它仍为0

Preloader.getInstance().loadImages(['https://si0.twimg.com/profile_images/188302352/nasalogo_twitter_bigger.jpg'], function() {
    console.log('images loaded');
});

// output
<img src="https://si0.twimg.com/profile_images/188302352/nasalogo_twitter_bigger.jpg">
0
0

Answer 1

在这一行：

img.onLoad = this.onLoad(img);

您错误地立即调用this.onLoad，而不是将该函数作为加载处理程序传递。因此，您的代码无需等待实际加载图像即可完成。

您也遇到错误 - 处理程序属性应该调用img.onload而不是img.onLoad。

请注意，.onload事件处理程序将使用图像作为其this上下文变量调用，而不是将其作为参数传递，因此您将使用this（表示图像），而不是你的类）在那个事件处理程序中。

另一种方法是写：

var self = this;
img.onload = function() {
    self.onLoad(this);
}

onLoad返回0作为宽度和高度

1 个答案: