Jquery 如何在加载次映像之前显示占位符映像

我想在悬停第一个图像时显示第二个图像 第二个图像路径位于

data alt src

使用这个函数，我交换img标签的src以显示第二个图像

var sourceSwap = function () {
    var $this = jqr(this); 
    var newSource = $this.data('alt-src');

    if (newSource != ''){
        $this.css("background-image",$this.attr('src'));
        $this.data('alt-src', $this.attr('src'));
        $this.stop(true, true).css("opacity",".5").attr('src', newSource).animate({
                            opacity: 1
                        }, 1000);

    }

}

但有时第二个图像需要时间加载，因此当用户将第一个图像悬停时，第二个图像将显示为已损坏

---

我使用jquery惰性加载表单加载图像。加载程序显示第一个图像。如何同时显示第二个图像的加载程序

尝试使用

new image（）

将第二个图像加载到浏览器缓存，并在图像的

load

事件中交换图像：

/* var $this = $(this), ... */
var img = new Image();
img.onload = function(){/*...*/ $this.attr('src', newSource); /*...*/};
img.src = newSource;

---

谢谢你的回答，我一次加载了很多图片，它实际上是一个网格。而且网格中的项目数量一直在变化。你能简单介绍一下怎么做吗？我想把你的

sourceSwap

函数改成var sourceSwap=function（）{var$this=jqr（this），newSource=$this.data（'alt-src'）；if（newSource！=''）{var img=newimage（）；img.onload=function（）{$this.css（'background-image'，$this.attr（'src'））.data（'alt-src'，$this.attr（'src'））；.stop（true，true）.css（'opacity'，'.5'）.attr（'src'，newSource）.动画（{opacity:1}，1000）；}；img.src=newSource；}这解决了我的图像损坏的问题。但我发现了一个新的东西。对于一些图像，一旦第二个图像出现悬停，那么当光标从第二个图像移出时，第一个图像将不会回来。你能在JSFIDLE.net上创建测试示例吗？我在这里面临的问题是，只有当有很多图像时才会出现这种情况。可能有30个项目。那么如果我创建了示例html文件，它可以正常加载。因此无法在html中复制它。如果它能更清楚地说明情况，还有一件事是我正在使用延迟加载插件来显示第一幅图像。