2

我有一个复杂的侧滚动页面，我正在处理构成背景的几层定位 div。

页面上还有大量图片会减慢加载时间。

我需要优先考虑背景层（带有css背景图像的div）以特定顺序加载（即首先是前山，然后是后山，然后是天空，然后是狗）。

我已经尝试为此使用 jquery 加载，但页面上加载的其他项目仍然会干扰这一点。我已经尝试隐藏它们并首先在文档准备好时显示它们，然后将它们放在我的 HTML 文档的顶部。我认为有一些方法可以通过加载事件来做到这一点，但我不确定如何从页面加载的其余部分中确定它的优先级。

我试图弄清楚是否有一种方法可以基本上暂停所有加载，按顺序加载我的 4 张图像，然后继续页面加载。

感谢您的任何建议或意见！我将批准第一个提交的有效答案！我知道还有其他类似的票，但我整个周末都在研究这个，尝试了其中的几个，但似乎找不到完全符合我需要的东西。

谢谢:) - 安

4

5 回答 5

1

现代浏览器非常聪明，因此您无法阻止各种文件的加载。

可能唯一真正的解决方法是从 javascript 加载几乎所有内容。

与其将所有内容都放在 HTML 中，不如将所有内容都放在 Javascript 中。如果您在 HTML 中有背景图像，那么它们将首先被加载，然后您的 javascript 可以完成剩下的工作。

如果您想避免过多的工作，那么制作一种带有背景和其他内容的预加载页面，然后通过 AJAX 加载其他所有内容是一种简单的方法。只需有一个空的块元素并通过 AJAX 从服务器请求页面内容。

于 2012-09-24T00:34:19.087 回答
1

我认为您在这里需要一种非常结构化的方法。

有很多因素决定了加载图像需要多长时间，并且它会在准备好后立即显示。你可以隐藏一些直到你准备好展示它们，但是你仍然会一次加载大量图像，这既慢又痛苦。

你显然有一个“创造性”的理由来按特定顺序加载（背景优先等）——所以接受这一点……你几乎可以通过制定一个时间表来编排加载。

然后从初始页面加载中删除除第一波图像之外的所有图像。由于这些是 CSSbackground-image属性，这意味着将它们从样式表中删除。

background-image然后，您可以通过使用 jQuery设置它们的样式属性来加载每个后续的图像集：

$('.foreground').css('background-image', 'url(<path>)');

要创建“序列”，您将希望每组图像在前一组完成加载时开始加载 -此处讨论了检测背景图像何时完成加载- 但模式可能如下所示：

var loadNextImageSet = function() {
    var imageSet = listOfImageSets.pop();
    loadImages(imageSet);
};

$(document).on('images-loaded', function() {
    loadNextImageSet();
});

loadNextImageSet();

whereloadImages()异步启动图像加载并在完成后触发自定义images-loaded事件。

如果您仍然希望您的页面在没有 JavaScript 的情况下仍能正确加载（尽管不是那么顺利），您可能需要尝试 2 个样式表 - 一个包含所有图像（针对非 JS 用户）和一个仅包含第一波（针对 JS 用户） ）。然后，您可以确保选择正确的，如下所示：

<html>
<head>
    ...
    <noscript>
        <link rel="stylesheet" href="full.css">
    </noscript>
</head>
<body>
    <script>
        var link = document.createElement('link');
        link.rel = 'stylesheet';
        link.href = 'background-only.css';
        document.head.appendChild(link);
    </script>
...
</body>
</html>

不是最简洁的 JavaScript 使用方式，但<script>元素必须尽可能早，以避免出现无样式的内容。

于 2012-09-24T00:53:12.013 回答
0

不确定它是否适合您，但是，您是否想过加载所有页面，而不是使用 JQuery 以正确的顺序显示您需要的内容？您可以在所有图像之前加载页面的某些部分，甚至可能是同一页面的一些简单版本，带有较浅的图像或没有图像但具有背景渐变等等......

于 2012-09-24T01:21:07.733 回答
0

我知道的最简单的方法是在显示中按照您想要的顺序排列图像：页面主体最顶部的无样式 div。

于 2012-09-24T00:12:50.483 回答
0

在我看来，首先加载背景图像的直接方法是将背景图像放在文档的前面，因此当浏览器加载页面时，图像开始加载。但我知道可能有图像的 div 可能不在前面。我厚你可以使用父 div 的背景图像属性。并使用 background-position 控制位置，也可以在父颜色上使用带有 background-color 的空 div 层来覆盖您不想看到背景颜色的空间；所以你可以加载背景图片。顺便说一句，如果你有很多背景图片要加载，这意味着你会多次请求服务器，这将是延迟。所以你可以将所有背景图像合并成一个图像，并使用“CSS Sprites”的方法在你想要的地方使用它，

于 2012-09-24T00:56:30.607 回答