在html和css中加载图像的顺序 [英] Order of loading images in html and css

问题描述

我可以以编程方式（或者，正如我们在语义上所谈论的 html 和 css ）决定哪个我应该先载入背景图片，然后在 $（window）.load 是否足以让它在浏览器上（例如，body-background在线 40 ，其他图像稍后在css文件中）还是必须使用javascript （如果是的话，是否有一些简单的解决方案？）



谢谢。



编辑：原因是我可以在加载图像时显示通知'加载...'，但是首先加载的部分在没有看到背景的情况下是没有意义的，因此背景必须先加载。

解决方案

没有可靠的方法。使用JavaScript意味着图像不会为禁用脚本的用户或不支持浏览器的用户加载。

几乎所有的外部资源（其中一个例外是脚本）的异步加载，从浏览器分析开始。这意味着它很可能是最先加载的较小文件，较大的文件需要较长的时间下载和显示。

您可能有可能 sprite 将所有较小的图像合成一张图像，使文件大小更大，以便它们全部同时显示（而不是连续显示），但我不会全心全意地将其推荐给任何常规页面。该过程只需调整背景位置以仅显示要从该集合中获取的图像。如果集合大小大于背景图片并且背景图片首先开始下载，背景很可能会在图片之前呈现。

can I programatically (or, as we're speaking about html and css, semantically) decide in which order should images load?

I want to make background image load first and then call som javascript upon $(window).load, is it enough to leave it on browser (e.g. body-background is on line 40, other images are later in css file) or do I have to use javascript (and if yes, is there some simple solution?)

Thank you.

Edit: The reason is that I could display notice 'loading...' while loading images, but the parts loaded first won't make sense without at least seeing the background, so background has to be loaded first.

解决方案

There's no reliable method. Using JavaScript would mean the images would never load for users who have scripting disabled or browsers that don't support it.

Almost all external resources (one of the exceptions being scripts) of a page are loaded asynchronously, starting as they are parsed by the browser. This means that it's most likely going to be the smaller files that load first, with the larger files taking longer to download and display.

It might be possible for you sprite all the smaller images into a single image which would make the file size larger so they would all show at the same time (instead of consecutively), but I wouldn't whole-heartedly recommend it for any normal page. The process simply involved adjusting the background position to show only the image you want from the collection. If the collection size is larger than the background image and the background image begins downloading first, there's a good chance the background will render before the images.

这篇关于在html和css中加载图像的顺序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！