Question

我正在尝试在页面加载时将所有图像都显示到fadeIn。但是，这只会在刷新页面时发生。当我点击指向另一个页面的链接时，它什么也没做。这是我的代码：

custom.js

jQuery(document).ready( function () {
    jQuery('img').hide().fadeIn(300);
 });

head.php

<script src="/js/custom.js"></script>

我已经检查了this thread和this one，但他们都有与我相同的解决方案。我从this thread得到了当前的代码。

Answer 1

如果我有一个猜测，我会说动画发生，但你的imgs没有完全加载。 300毫秒很短，动画很可能是在加载图像时完成的。尝试将$(document).ready()更改为$(window).load()。

如果动画在刷新时起作用，那是因为你的img已经被缓存了。

Answer 2

当DOM准备就绪时jQuery触发器的ready方法，没有图像。每个img都是来自主页面的独立请求。如果你有谷歌浏览器（其他浏览器具有相似的功能），你可以检查页面，在网络选项卡中，你可以看到你的网站所做的所有请求。

您需要做的是在img加载时监听事件。 jQuery有一个函数（load：jQuery load()）但不推荐使用。

你应该使用on（'load'），如下所示：

$('document').on('load', function() {
   //Do the magic
})

我建议您加载已隐藏的图像，并在加载时显示它们。

你也可以使用这样的东西：

var img = new Image();
img.onload = function() { //Do magic }
img.src = "http://path/to/image.jpg";