jquery - jQuery 就绪函数仅在刷新时加载

Question

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

自定义.js

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

头文件

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

我已经检查了这个线程和这个线程，但它们都有与我相同的解决方案。我从这个线程得到了当前代码。

Answer 1

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

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

Answer 2

jQuery 的 ready 方法在 DOM 准备好时触发，没有 Images。每个 img 都是来自主页的单独请求。如果您有谷歌浏览器（其他浏览器具有类似功能），您可以检查该页面，并在网络选项卡中查看您的网站所做的所有请求。

您需要做的是在 img 加载时监听事件。jQuery 有一个函数（加载：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";