Question

网上有很多类似功能的例子，但似乎没有一个对我有用。我现在拥有的是

<img id="sample_image" src="sample_image.png" alt="">
<script>
$('#sample_image').on('load',function(){
    $("#sample_image").css("background", "#ff0000");
});
</script>

我希望在更改背景颜色之前加载/显示图像，但是在加载图像之前会看到红色背景。

我尝试使用jQuery设置src ...

<img id="sample_image" src="" alt="">
<script>
$('#sample_image').attr("src", "sample_image.png").on('load',function(){
    $("#sample_image").css("background", "<%=strRGB%>");
});
</script>

但这也是一样。

我做错了什么？

由于

Answer 1

我不确定您使用的load方法是针对元素还是图像。

您可以创建Image对象并检查onload

var img = new Image();
img.onload = function(){
    //change the attr here
}

Answer 2

在文档（https://api.jquery.com/load-event/）中，他们得到了：

<img src="book.png" alt="Book" id="book">
...
$( "#book" ).load(function() {
  // Handler for .load() called.
});

当然，你可以使用香草：

var img = new Image()
img.src = "book.png";
img.onload = function(){ ... };

jQuery - 在更改背景之前等待图像加载

2 个答案: