如何在加载所有图像后加载HTML主体 [英] How to load the body of HTML after loading all images

问题描述

我正在尝试为网页的onload（）事件编写一些代码，我想等待网页出现，直到所有图像加载到网页上 。我发现这一点：

onLoad加载所有图片的事件

但它不能像预期的那样工作， t知道如何使用它....

那么，这是使用onload事件等待所有图像加载的最佳方式，还是您推荐另一个一个？

我想要在这个网站上预先加载图片：链接。地图图片更大，所以它的持续时间比正确的要长。但它不能小，因为它是透明的图像...所以我决定在显示完整的网页后预载所有图像。但仍然不能...任何想法？

解决方案

我会尝试设置添加特定的类，如加载到html或body元素，钩住一个函数直到 onload event /使用jQuery加载所有图像，然后一旦图像被加载，从html / body元素中删除 loading 类。

然后添加一些CSS到隐藏整个页面内容，而是在加载类存在的情况下显示一些加载占位符。只有在用户启用了JavaScript的情况下，才应该谨慎添加此类。由 js 和 no-js 类rel = nofollow noreferrer> Modernizr 可以帮助你做到这一点，或者自然地简单地使用javascript添加 loading 类。

至于实际的预加载，请此和这是两个相当广泛的线程，涉及预加载图像。

I'm trying to write some code for the onload() event of a Web page, on which I want to wait for the Web page to appear until all images are loaded on the Web page. I found this:

onLoad event for loading all images

But it doesn't work exactly as expected or it's me who doesn't know how to use it....

So, is this the best way for using the onload event to wait all the images to be loaded or do you recommend another one?

I want the images to be preloaded on this Web Site: The link. The map image is bigger so that's why it lasts more than the right one. But it can't be smaller, as it's a transparent image... So I decided to preload all images after showing the complete Web page. But still couldn't... Any idea?

解决方案

I would try setting adding specific class such as loading to the html or body element, hook a function up to the onload event/using jQuery in which you load all the images, and the once the images have been loaded remove the loading class from the html/body element.

Then add some CSS to hide the entire page contents and instead display some loading placeholder in case the loading class is present. Caution should be taken to add this class only when the user has javascript enabled. The js and no-js classes added by Modernizr can aid in doing this, or naturally simply adding the loading class using javascript.

As for the actual preloading, this and this are two quite extensive threads that deals with preloading images.

这篇关于如何在加载所有图像后加载HTML主体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！