正在加载高分辨率背景图片

问题描述

| 我有一个2000px x 1500px的彩色背景图像，由于细节原因，我将其保存为jpeg渲染图，大小为1.1 MB。我正在使用CSS背景属性来渲染图像。因此，对于Web开发人员来说，它还比较陌生，并且与客户/设计人员合作，在此过程中此刻尚不接受更改设计，因此我应该怎么做才能帮助快速加载此图像。我不知道这是否有所作为，但该网站使用的是Joomla 1.5.9。这是我一直想了解的内容，但是在寻找解决方案方面遇到了麻烦...我希望有人能提供帮助！ 感谢大家！     

解决方法

        无法使图像神奇地加载得更快。但是，有时将图像分割成较小的图像会带来令人惊讶的尺寸增长；因此，如果您的CSS布局没有问题（通常是这样），则可以尝试一下。 您的另一种可能性是使用渐进JPEG图像。它们的编码方式使浏览器可以在加载时逐渐显示更精确的图像。这意味着，图像最初看起来模糊（或不完整），但具有完整的尺寸，然后逐渐变得更清晰，更好。它非常适合打算缓慢加载的图像（或者至少是确认缓慢加载的图像）。     ,        您可以做的最好的事情是尝试将文件大小缩小到尽可能小。让它使用某种类型的优化器，例如smush.it。如果创建了背景图像，请先尝试将其保存为渐进图像，然后先加载较低分辨率的版本，然后完成加载。但是最好的办法是尝试通过找到重复的图案并裁剪掉该部分并使用它来缩小图像宽度和高度的大小。大多数about.me图片的大小不超过100kb，且宽度大于1200px。     ,        您可以使用以下方法立即调用头部中的图像

<script>
(new Image()).src = \"IMAGE PATH\";
</script>

并确保使用不同的程序尽可能地压缩图像，或者如果您有photoshop cs5，则可以将其保存在网络设备上以去除所有多余的垃圾，您可以尝试使用yahoo的smush.it http://www.smushit.com/ysmush.it/ 或者您可以将网站的加载完全延迟几秒钟，直到可以确定图像正在加载为止，您可以尝试执行诸如隐藏所有元素并将其淡入setTimeout之类的操作，例如 * CSS

body{
opacity:0;
}

* jQuery的

setTimeout(function(){$(\'body\').animate({opacity:\'1\'},300)},5000);

尽管那可能不那么实际。     ,        页面其余部分为您加载工作后，是否会加载背景图片？至少以这种方式，访问者将能够使用您网站的其余部分，直到加载1.1MB。 在onload函数中是否将ѭ4the的

style

属性设置为ѭ5along？     ,        通过CDN传送图像可能会加快速度。通常情况下，最好对更好的服务器进行优化，以将合适的TCP数据包大小/ MTU传递给那里的各种客户端，并且通常在快速传递事物的细节方面做了很多工作。像手机这样的慢速连接仍然会讨厌您，但是正确设置数据包大小等东西可以充分利用可用的带宽。