Question

我知道这是一个常见的问题，但我尝试了许多建议的解决方案无济于事。我想要实现的只是让图像在页面加载时淡入（不会短暂出现，然后消失，然后逐渐消失）。

根据我的阅读，建议首先使用CSS隐藏图像，以便在fadein发生之前不应加载：

    #imgfade {
    display: none;
    }

我知道这有效，因为如果删除Jquery，图像就不会显示。 Jquery代码：

$("#imgfade").fadeIn(600);

我也试过了：

$("#imgfade").hide().fadeIn(600);

它主要起作用，但是当访问另一个站点然后返回时，闪烁发生。有时前进和后退导致它工作8/10次，然后有时会闪烁。

我也试过这个CSS（使用适当的匹配Jquery）无济于事：

#imgfade {
opacity: 0;
}

我怀疑这可能与浏览器缓存有关吗？

我正在使用Bootstrap 3，但是在加载bootstrap（和其他）CSS页面后（在其中的部分中）会出现自定义CSS（如上所示）。

任何人都可以推荐一种完全傻瓜式的方法来避免这种情况发生吗？我在其他一些页面上也遇到了同样的问题。

非常感谢提前。

Answer 1

我相信我已经找到了解决这个问题的方法，这似乎每次都对我有100％的帮助希望这可能有助于其他人：

将Jquery fadein代码放在HTML的 very end 上（在/ body之后，在/ html之前）似乎出于某种原因解决了这个问题。

我真的不明白为什么，但我只能猜测它与DOM加载顺序有某种关系。也许这会让CSS有机会在尝试淡入之前正确读取（确保div元素实际上是隐藏的）。

Answer 2

原发帖者问这个问题几年后，但也许这会帮助其他人在尝试解决同一问题时遇到这个问题。

我也遇到了这个问题，并通过删除我试图淡入/淡出的元素上的“过渡”css样式解决了这个问题。

这不是最漂亮的解决方案，但在紧要关头，您可以执行以下操作：

$("#imgfade").css("transition", "0s")       //Turn off transition 
$("#imgfade").fadeIn(600, function() {      //Run jQuery fade/show/hide, with a callback
    $("#imgfade").css("transition", "1s")   //In the callback, reset the transition to its original value
})

Jquery图像在淡入之前出现短暂的闪烁

2 个答案: