Question

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

问题：

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

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

有更好的方法吗？

Answer 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');
   }

});

Answer 2

你不需要jQuery，你可以使用CSS。

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

或者，如果您不想更改HTML：

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

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

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

删除图像加载时的背景图像

2 个答案: