使用javascript更改img src/jquery

我想要在加载目标图像时更改图像的来源并显示“正在加载...”图像。我正在做以下操作：使用javascript更改img src/jquery

$('#imageid').attr('src','loading.jpg'); 
$('#imageid').attr('src',path);

其中path是目标图像的路径。但是，JQuery同时执行两个操作，并且不会显示loading.jpg。使用普通的Javascript时会发生同样的事情。

如何使第一行生效，以便在下一个图像加载时显示loading.jpg？

来源

2011-08-14 user774528

由于您一个接一个地替换图像src，它不可见可能是在第一个图像加载之前发生下一个图像源请求。您可以尝试在第一张图像完全加载后设置下一张图像。这可以通过设置图像load事件中的下一个图像源来实现。试试这个

$('#imageid').load(function(){ 
    $(this).unbind('load')//We need to unbind the load event because load event will again get called next time when we set the source of this image 

    $(this).attr('src',path); 
}).attr('src','loading.jpg');

来源

2011-08-14 03:21:04 ShankarSangoli

问题是，jQuery实际上是改变图像上的src，并且没有简单的方法来完成上面的任务（如果你想要的图像是loading，你需要有即img标签的src，但是因此该src不能也是loading.gif）。但是，您可以通过一些JavaScript和CSS实现这一点：

$('#imageid').attr('src', path).addClass('loading').load(function() { $(this).removeClass('loading'); })

然后只需添加CSS样式把加载图像在图像上项目时有附挂loading类。

img.loading { 
    background: url("/loading.gif") no-repeat center center transparent; 
}

这应该为您的图像制作平滑的加载。值得注意的是，你也可以使用两个img标签来做到这一点，并交换哪一个是可见的。另外，请注意load处理程序，因为缓存的图像会在某些浏览器中立即加载。请享用！

来源

2011-08-14 02:54:10 ghayes

这是什么CSS？ – user774528

使用javascript更改img src/jquery

回答

相关问题