如何显示一个图像占位符，直到二次加载图像

我想显示第二图像时，悬停在第一图像第二图像路径是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显示为第一个图像。如何显示第二图像装载机以及

来源

2014-01-07 zamil

尝试加载第二图像使用图像的load事件new Image()和交换图像浏览器的缓存：

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

来源

2014-01-08 09:13:50

感谢乌拉圭回合的答案，我有很多的图像加载一次，它实际上是一个网格。网格中的项目数量一直在变化。我可以简单介绍一下如何做到这一点 – zamil

我的意思是将你的'sourceSwap'函数改为 var sourceSwap = function（）{ var $ this = jqr（this）， newSource = $ this.data（'alt- SRC'）; if（newSource！=''）var img = new Image（）; img.onload = function（）{ $ this.css（'background-image'，$ this.attr（'src'）） .data（'alt-src'，$ this.attr（'src'）））; （'opacity'，'。5'） .attr（'src'，newSource） .animate（{opacity：1}，1000）; }; img.src = newSource; } } –

这解决了我的问题，破碎的图像。但我发现了一件新事物。对于某些图像，一旦第二张图像出现悬停，当光标从第二张图像移出时，第一张图像不会回来。 – zamil

如何显示一个图像占位符，直到二次加载图像

回答

相关问题