Question

我希望在悬停第一张图片时显示第二张图片第二个图像路径位于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延迟加载表单加载images.Loader显示第一个图像。如何显示第二个图像的加载程序

Answer 1

尝试使用new Image()将第二张图片加载到浏览器的缓存中，并在图片的load事件中交换图片：

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

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

1 个答案: