我正在处理一个复杂的侧向滚动页面，其中有几层定位的 div 构成背景。
页面上还有大量图像，会减慢加载时间。
我需要优先考虑背景图层(带有CSS背景图像的div)以特定顺序加载(即首先是前山，然后是后山，然后是天空，然后是狗)。
我已经尝试使用 jquery 加载来实现此目的，但页面上加载的其他项目仍然会干扰此操作。我尝试过隐藏它们并首先在文档准备好时显示它们，然后将它们放在 HTML 文档的顶部。我认为有某种方法可以通过加载事件来完成此操作，但我不确定如何从页面加载的其余部分中确定其优先级。
我试图弄清楚是否有一种方法可以基本上暂停所有加载，按顺序加载我的 4 个图像，然后继续页面加载。
感谢您的建议或意见!我将批准第一个提交的有效答案!我知道还有其他类似的门票，但我整个周末都在研究这个问题，并尝试了其中的几个，但似乎找不到完全符合我需要的东西。
谢谢你:) - 安
最佳答案
我认为您在这里需要一种相当结构化的方法。
有很多因素决定图像的加载时间，并且一旦准备好就会显示。您可以隐藏一些图像，直到准备好显示它们为止，但是您仍然需要一次加载大量图像，这既缓慢又痛苦。
您显然有一个以特定顺序加载的“创意”理由(背景优先等) - 所以接受这一点...您几乎可以通过制定时间表来编排加载。
然后从初始页面加载中删除除第一“波”图像之外的所有图像。因为这些是 CSS background-image属性，这意味着将它们从样式表中删除。
然后，您可以通过设置 background-image 来加载后续的每组图像。使用 jQuery 的样式属性:
$('.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>元素必须尽早出现，以避免出现无样式的内容。
关于Javascript/Jquery 页面按顺序首先加载特定图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12557378/