javascript - 无法读取 null 的属性 'complete' - 完成

Question

我想得到 this effect在我的网页上工作。

但我已经尝试过多次，但每次都失败了。所以，这就是为什么我要首先在本地尝试它的原因。我复制了您在 codepen.io 网页上看到的所有内容，并将两张图片替换为我的图片。此外，我将 id id="coverart" 添加到 img 中，仅此而已。

但是我得到一个错误:

if (image.complete) {

原因是:

Cannot read property 'complete' of null

但是如果我在我的控制台中输入:

document.getElementById('coverart');

我取回元素:

<img id="coverart" src="https://gamekeys-shop.de/wp-content/uploads/2017/01/coverart.png">

所以，它不能为空...可能是什么原因，我该如何解决？ Here you can download the little html, css and js files.

编辑:

如果你插入alert(image)，你会得到null。如果你更换这个

if (image.complete) {
  start();
} else {
  image.onload = start;
}

有了这个

image.onload = start;

你会得到同样的空错误...为什么我得到空...它不能为空？

Answer 1

有几种可能的改进方法:1) 只需将您的 javascript 文件放在 img 标签之后。

2) 或者仅在加载文档时运行您的代码。