当前位置: 首页 > 编程笔记 >

浅析js预加载/延迟加载

师建德
2023-03-14
本文向大家介绍浅析js预加载/延迟加载,包括了浅析js预加载/延迟加载的使用技巧和注意事项,需要的朋友参考一下

Pre loader 预加载一般有两种常用方式:xhr和动态插入节点的方式。动态插入节点是最为简单也最为广泛的一种异步加载方式,然后使用动态插入节点方法加载的文件都会 在加载后立即执行,javascript的执行一方面会占用浏览器js执行进程,另一方面也可能改变页面结构,而css 的执行更有可能让整个页面变化。xhr方式虽然不会执行脚本,但是由于同域的限制

Lazy loader方式在一些图片非常多的网站中非常有用,在浏览器可视区域外的图片不会被载入,直到用户将页面滚动到它们所在的位置才加载,这样对于含有很多 图片的比较长的网页来说,可以加载的更快,并且还能节省服务器带宽。jQuery插件中也有插件来实现该功能。

在腾讯的QQ空间和微博中就采用这样技术实现,在大访问量的网站,这样就相对可以减少服务器的压力,在用户访问到所见区域和下面内容时候才去请求。而不是传统的一次把整个页面下载过来,在下载过程中存在着用户等待内容呈现。

IE中使用new Image().src 去预加载文件。
其他浏览器使用动态插入document.createElement('object')标签来完成加载。

说明:
1. new Image().src 之所以不能在ff中使用是因为ff对图片实现了一套单独的缓存。 同时safari和chrome看起来也没有被缓存
2. 动态插入object 标签需要插入到非head部分,以触发加载。
3. ie7 ie8 也可以通过一些代码使用动态object加载文件。

 类似资料:
  • 描述 (Description) 延迟加载可应用于图像,背景图像和淡入效果,如下所述 - 对于图像 要在图像上使用延迟加载,请按照给定的步骤进行操作 - 使用data-src属性而不是src属性来指定图像源。 将类lazy添加到图像。 <div class = "page-content"> ... <img data-src = "image_path.jpg" class = "l

  • 问题内容: 我在JPA实体中的延迟加载属性有问题。我读过许多类似的问题,但它们与spring或hibernate有关,并且他们的后代不适用或没有帮助。 该应用程序是在Wildfly应用程序服务器上运行的JEE和JPA2.1。有两个实体,DAO会话bean和servlet将它们放在一起: 当我运行此代码时,它失败并显示: 我对WebLogic / JPA1使用了非常相似的模式,并且运行平稳。任何的想

  • 问题内容: 我想知道在node.js中使用是否等效于延迟加载? 例如,如果我有一个函数需要代码中其他任何地方都不需要的特定node.js包,那么我最好在该函数内部使用它,以便仅在调用该函数时才包含所需的包。 我还不确定是否会由于缺乏对node.js架构的了解而在性能方面有所改善?我想它每次与服务器的连接都会使用更少的内存。但是,当它必须读取程序包时,它会增加磁盘的I / O吗,还是将其添加到内存中

  • 这是从这里开始的后续行动。 我正在实现一个表,它将数据异步加载到表单元格中。问题是,表单元格有时无法正确更新。有时它会以某种方式“挂起”并永远显示“加载...”。实际值只有在我在表中滚动一点时才会更新。 要复制,请在表格中快速向下滚动应用程序。某些单元格不会显示“延迟加载”值,而是显示占位符字符串。 延迟加载属性如下所示: } 应用程序如下所示: 完整的可运行代码可以在这里找到。

  • 有很多关于“懒惰”的例子和文档。也许我没有明白,但为什么要用它呢?实例化bean成本

  • 问题内容: 如果这是完全相同的内容,请纠正我,我知道这个话题经常被讨论,但是找不到确切的答案。 问题: 在MVC Web应用程序中处理Hibernate对象的最佳实用解决方案是什么? 细节: 我正在使用Hibernate,并希望在可能的情况下利用延迟加载。 我正在使用MVC风格的Webapp。 我讨厌获得延迟加载初始化异常。 我讨厌不得不在事务之间重新连接Hibernate对象。 选项: 渴望装载