jquery – 加载后淡入图像

我发现这段代码可以达到理想的效果并在JSFiddle上尝试过

它似乎工作在它加载后淡化图像.然后我在一个网页上尝试了它并且它的工作方式不一样,首先加载图像而不是将其淡入.尽管有时它看起来像是在加载的同时淡入.

是否有更可靠的方法来实现这一点,最好是在可能的情况下修改此代码？

$( “#图像”).就绪(函数(){
$( “#预加载”)淡入(1000).
});

解决方法

fadeIn()实际HTML标记中的图像唯一可靠的方法是在HTML标记中设置一个onload处理程序,如下所示：

<div id="image">
    <img id="preload" onload="fadeIn(this)" src="http://farm8.staticflickr.com/7227/7007769551_3b5b1640ea_b.jpg" style="display:none;" />
</div>

<script>
// this function must be defined in the global scope
window.fadeIn = function(obj) {
    $(obj).fadeIn(1000);
}
</script>

这里的工作演示：http://jsfiddle.net/jfriend00/X82zY/

这样做,你不需要给每个图像一个id或类.只需在标记中设置样式和事件处理程序即可.

您必须将事件处理程序放在标记中的原因是,如果您等到页面的javascript运行,则可能为时已晚.图像可能已经加载(特别是如果它在浏览器缓存中),因此您可能错过了onload事件.如果将处理程序放在HTML标记中,则不会错过onload事件,因为在图像开始加载之前已分配处理程序.

如果您不想在javascript中放置事件处理程序,那么您可以执行以下操作：在实际HTML中使用占位符表示图像,并使用javascript创建实际图像标记并插入它们并拉出图像占位符的网址：

<div>
    <span class="fadeIn" src="http://farm8.staticflickr.com/7227/7007769551_3b5b1640ea_b.jpg"></span>
</div>

<script>
$(document).ready(function() {
    $(".fadeIn").each(function() {
        var src = $(this).data("src");
        if (src) {
            var img = new Image();
            img.style.display = "none";
            img.onload = function() {
                $(this).fadeIn(1000);
            };
            $(this).append(img);            
            img.src = src;
        }
    });
});
</script>

工作演示：http://jsfiddle.net/jfriend00/BNFqM/

第一个选项将使您的图像加载更快(因为图像加载在页面解析后立即开始),但第二个选项使您可以对该过程进行更多编程控制.

原文链接：https://www.f2er.com/jquery/181128.html

jquery – 加载后淡入图像

解决方法

猜你在找的jQuery相关文章