Question

当我尝试以两种不同的方式执行以下操作时，我想到的不同之处在于，不是在使用方面，而是性能明智的影响：

使用图片标记

<img src='http://lorempixel.com/300/300/sports/2/'>

以及，比方说，

img{
  width: 100px;
  height: 100px;
}

使用div标签

<div class='test'></div>

以及，比方说，

.test{
  background-image: url('http://lorempixel.com/300/300/sports/2/'); 
  width: 100px;
  height: 100px; 
}

话虽如此，我想知道两种情况下图像何时加载。对于第一个，它非常容易使用load事件。但对于第二个，div案例，我该如何检查？..我知道这种方式OverHead，但并不意味着它会产生开销，为每个div分别实例化Image ？

还有其他可能的方法来实现同样的目标吗？

Answer 1

为 onload 事件添加事件侦听器。

加载对象时会触发onload属性。

onload最常用于元素中以执行a   一旦网页完全加载了所有内容（包括   图像，脚本文件，CSS文件等）。但是，它可以用于   其他因素也是如此。

那么如何将这个应用于2个案例？

$('<img/>').attr('src', 'IMAGE_SOURCE_LINK').load(function() {
   $(this).remove(); 
   $('element').css('background-image', 'url('IMAGE_SOURCE_LINK')');
});

以上代码仅显示我的意思。浏览器不会重新加载图像，因为它们保留在浏览器内存中，浏览器只加载一次。

找到div背景图像的方法已加载

1 个答案: