在图像加载时删除背景图像答案

【问题标题】：Remove background image on image load在图像加载时删除背景图像
【发布时间】：2011-03-09 20:25:01
【问题描述】：

我正在通过 AJAX 加载图像标签，并使用 jQuery 中的常规 .html(content) 函数与一堆其他 HTML 一起插入它们。但是，如果您从头开始加载页面，这个问题仍然适用。现在，我有一个背景图像占位符可以在图像加载时放在那里。我希望这个背景图片在图片加载时消失。

问题：

如果我附加一个传统的.load(function) 事件监听器，我担心图像可能会在应用钩子之前加载（将钩子放在图像之后的小 JS <script> 中，而不是放在 $(function(){}) 块中可能会有所帮助）。我还没有遇到过这种行为，但我不知道规范中没有任何内容可以防止这种情况发生（因为应该在应用钩子之前完全解析图像标签）。

我目前的解决方案。将命令放在图像标签内的内联 onload= 属性中。

有没有更好的办法？

【问题讨论】：

标签： javascript jquery css image dom

【解决方案1】：

直到大约一周前，我也会迷路。谢天谢地this answer to another question 会帮助你：

基本上把这个放在$():

$(function(){ 
   var img = $("#idofimage").load(function () { 
      /* your magic to swap out placeholder */ 
   });

   if (img[0].complete) {
     // Trigger the load handler if the image
     // is already loaded
     img.trigger('load');
   }

});

【讨论】：

啊...所以complete 是我正在寻找的标志。我一直在搜索 DOM 规范，一定错过了！干杯。

【解决方案2】：

你不需要 jQuery，你可以用 CSS 来做。

.my-img-loader-class { background:url('placeholder-or-progress'); }

或者如果您不想更改 HTML：

#container img { background:url('placeholder-or-progress'); }

在特定 div 中加载图像时显示占位符。

它的工作方式是图像元素将占位符图像显示为其背景，当src加载时它会出现在占位符上方，以便很好地替换它。

【讨论】：

这是我已经在做的。我希望图像加载后背景消失。否则，透明图像将显示背景。 @Doug Neiner 的工作成功了。