gpt4 book ai didi

javascript - 在加载文档之前隐藏图像,然后对其应用效果

转载 作者:可可西里 更新时间:2023-11-01 14:50:29 25 4
gpt4 key购买 nike

我试图找到一种简单但可靠的方法来隐藏图像直到它被加载,然后给它一些 jQuery 效果(例如 fadeIn)但是我找到的所有方法似乎有一些问题。例如,这个解决方案:

<img id="photo" src="bigimage.jpg" style="display:none" />

$("#photo").load(function() {
$(this).fadeIn("slow");
});

如果在 DOM 准备好之前加载图像,则可能不会触发(load() 不会触发)。

所以我写了下面的内容,它只在图像确定加载后才添加 URL...

$.fn.ImageLoad = function(url){
$image = $(this);
$("<img >").attr("src", url).load(function(){
$image.attr("src", url);
});
return $image;
};

$("#cast").ImageLoad("http://pas-wordpress-media.s3.amazonaws.com/wp-content/uploads/2013/08/Google-Office-Building-in-NYC.jpg").fadeIn("slow");

但它只会在图像被浏览器缓存后运行 fadeIn("slow")。第一次加载时,它只是出现,没有任何效果。

在这里见你自己: http://jsfiddle.net/KKn4N/

有什么办法可以解决这个问题吗?

最佳答案

这是我的版本。每次都有效并且完全跨浏览器。

$.fn.ImageLoad = function(url){
$this = $(this);
$this.hide().on('load', function(){
$this.fadeIn();
});
this[0].src = url;
};

关键是

  • 在回调中淡入淡出
  • 先躲起来
  • 在设置 .src 之前监听 .load

DEMO

关于javascript - 在加载文档之前隐藏图像,然后对其应用效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20549965/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com