Question

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

页面上还有大量图像可以减慢加载时间。

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

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

我正在试图找出是否有办法实质上暂停所有加载，按顺序加载我的4张图像，然后继续页面加载。

感谢您的任何建议或意见！我会批准第一个提交的答案有效！我知道还有其他类似的门票，但是我整个周末都在研究这个问题并尝试了其中几个，但似乎无法找到与我需要它完全相同的东西。

谢谢:) - 安

Answer 1

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

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

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

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

Answer 2

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

有很多因素可以决定图片加载的时间长度，并且只要它准备好就会显示出来。你可以保留一些隐藏，直到你准备好显示它们，但是你仍然会一次加载大量的图像，这是缓慢而痛苦的。

你明显有一个“创造性”的理由以特定的顺序加载（背景优先等） - 所以接受......你几乎可以通过制定计划来编排装载。

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

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

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

要创建'序列'，您需要在上一组完成加载时开始加载每组图像 - 检测背景图像何时加载已完成HERE - 但模式可能看起来像这样：

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

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

loadNextImageSet();

其中loadImages()异步启动图片加载并在完成时触发自定义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>元素必须尽可能早，以避免出现无格式内容。

Answer 3

我所知道的最简单的方法是按照您想要的顺序排列图像：在页面的最顶部没有样式的div。

Answer 4

在我看来，首先加载背景图像的直接方法是将背景图像放在文档的前面，这样当浏览器加载页面时，图像开始变形。但我知道也许有影像的div可能不在前面。我很厚，你可以使用父div的background-image属性。并使用background-position来控制posotion，你也可以在父颜色上使用带有背景颜色的空div图层来覆盖你不想看到背景颜色的空间;所以你可以加载背景iamge firest。顺便说一下，如果要加载许多背景图像，这意味着您将多次请求服务器，这将是延迟。因此，您可以将所有背景图像合并到一个图像中，并使用＆＃34; CSS Sprites＆＃34;在你想要的地方使用它，我认为它可以加快你的加载速度。

Answer 5

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

Javascript / Jquery页面首先按顺序加载特定图像

5 个答案: