纯CSS、简单JS两种实现HTML页面指定内容延迟加载的方法

有时候制作网页的时候,要在某些地方加载一些体积比较大的内容或者广告等,这些内容常常会导致页面加载变慢,因为这些内容还没有加载完的时候,下面的内容就要继续等待加载。

于是我们可以让影响页面加载速度的内容在整个页面的其他内容加载完之后,再进行加载。

当然有人会用各种延迟加载的技术,但ajax什么的过于复杂了。

这里提供两种最简单的方法。

方法一:纯CSS实现HTML页面指定内容延迟加载

把整个页面外部的div的CSS属性设置为“position:relative”,然后我们要延迟加载的内容所在的div的CSS设置为:“position:absolute;”。然后把延迟加载内容的HTML代码放到页面源代码的最后面。例如:

方法二:JS实现HTML页面指定内容延迟加载

发表评论

电子邮件地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据