Php 如何正确预加载图像、js和css文件？

我正在从头开始创建一个网站，在90年代末我就开始了，但从那时起，网络发生了很大的变化！我更像一个设计师，所以当我开始整合这个网站时，我基本上做了一个php包含系统，使网站更“动态”

当您第一次访问该站点时，如果您尚未登录（cookies），您将看到一个登录屏幕。如果您未登录，将引入一个名为access.php的页面。 我想我应该在这一点上预加载最重的图像。因此，当用户完成登录时，图像已经被缓存。这是我想要的。但我仍然注意到，最大的图像仍然没有立即渲染。所以这似乎有点毫无意义

所有这些都让我重新思考了网站的结构以及脚本和css文件的加载方式。在Firefox中使用FireBug和YSlow，我看到了一些指针，比如expires头和减小每个脚本的大小。但这真的是罪魁祸首吗

例如，在main index.php中这样做真的很愚蠢吗？整个网站的结构基本上是这样的

<?php
require("dbconnect.php");
?>

<?php
include ("head.php");
?>

---

我知道它看起来像是cssimage（8）最重，但我已经从以前预装了这些图像，它并不真正影响渲染。

我在一个外联网项目中使用了以下方法：

使用jQuery和一组文件名，我在所有图像、.js和.css文件中添加了ajax，以便将它们预加载到缓存中。当我遍历数组时，我会更新屏幕上的进度条，指示站点正在加载-很像flash loader

---

它工作得很好。

我将默认使用纯CSS和HTML显示加载页面，然后等待jQuery加载并预加载图像。一旦你做了重定向到正常的网站，因为图像将已经在缓存中，他们将不会再次加载

---

您可以做的另一个优化是缩小所有JS文件并合并除jquery.JS之外的所有JS文件。首先将jquery.js放入HTML中，以便它首先加载。还可以将脚本标记放在HTML的底部。

为了加快速度，您可以将所有图像组合到同一个图像精灵上，这样您只需要一个请求即可下载所有图像。但这需要您微调css，以便只显示图像的一小部分。 要获得更好的解释，请查看：

---

另一个可能看起来有点愚蠢的答案是，当我创建一个网站时，我喜欢想到这一点：保持简单。我的意思是，你所有的JS都增加了真正的价值吗？所有这些图片都很好吗？你能不能少显示一些，做一个更轻的设计？我一点也没有批评你的工作，只是建议你…

听起来你已经基本上完成了预加载，如果你加载了一次，并且过期标题设置正确，那么你已经预加载了它，不管它是什么类型的内容

文件组合可能是快速网站的关键，每个额外的文件将增加加载时间，在网络和服务器延迟的最坏情况下，您可能会为每个单独的文件添加第二个额外的文件。更常见的情况是，每个文件的时间大约为100-200毫秒

如果尚未缩小，请缩小脚本，并将它们放在同一个文件中，只需记住保持顺序即可。我不知道为什么Ivo Sabev不包括jQuery

CSS文件也是如此

---

您在测试图像压缩方面做了多少工作？尝试不同的压缩设置，比较大小和质量，确实会有所收获。对于PNG图像，使用PNGOUT的IrfanView通常可以使文件比其他程序小25%，除此之外，还可以通过将图像减少到8位颜色来实现非常大的尺寸缩减，因为有很多图形元素，你根本无法分辨它们之间的差异。在Stack Overflow上，编辑器控制按钮中有一个很好的压缩和堆叠图像示例：

所有脚本标记？因为我使用Cufon，这不影响它吗？不，不会，因为Cufon将在加载脚本后立即启动，我猜您已经在$（document）.ready（）上启动了它。谢谢您的建议：）我喜欢！无论如何，这个网站并不是典型的网站。它更像是一个应用程序。其中大部分都是围绕渲染的设计。所以它的图形不会比现在轻。但是我可以把很多图像组合成精灵。但是我的很多图像是透明的，或者说是半透明的。我需要将所有透明图像收集到一个png中。GIF（较少的颜色）和jpeg也是一样的吗？事实上，我不能帮助你更精确地使用Css精灵。我从未使用过它们，只是或多或少地了解它们。但将所有透明图片和gif放在一起听起来是合乎逻辑的。那么如果你使用JPG，它应该是用来拍照的。在这种情况下，页面上应该只有一张照片，因此为每个页面生成不同的精灵。。。很无聊。请尽可能做得更好，记住，对于相同的权重，HTPP请求越少越好。您能详细介绍一下“所有图像、.js和.css文件中的iAjax”吗？你是怎么做到的？这是我可以用的东西吗？如果能够在用户输入用户名和密码的同时预先加载整个站点（index.php），那就太好了！看看jQuery库中的$.get和$.ajax。在文件名数组中循环并调用其中一个方法相当简单。

doc(1) - 5.8K
js(5) - 198.7K
css(2) - 5.6K
cssimage(8) - 634.7K
image(6) - 110.8K