首页 > 代码库 > 简单理解预加载技术
简单理解预加载技术
预加载原理就是在浏览器加载页面的时候先创建一个对象，然后填充数据，从而达到预先加载的效果。（即按照文档流顺序，先利用js加载函数去加载图片，然后在渲染dom元素）
代码如下：
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>js预加载</title> </head> <script> //针对firefox window.addEventListener("DOMContentLoaded", preloadImages); //创建图片数据 var imageArray = new Array("http://bizhi.zhuoku.com/2010/10/22/kuanping/kuanping39.jpg", "http://img1.3lian.com/2015/w7/90/d/5.jpg"); preloadImages(imageArray); function preloadImages(imageArray) { for(var i = 0; i < imageArray.length; i++) { //创建图片对象 var tempImage = new Image(); //填充图片 tempImage.src = imageArray[i]; document.write(‘<img src="http://www.mamicode.com/‘ + imageArray[i] + ‘" />‘); } } </script> <body> </body></html>
附图：
从上图看不出什么预加载的效果。
那我设置一下网络的状态，就看得出效果了
从上图可见，图片明显是提前加载了。
PS:此代码仅用于研究预加载功能具体怎么实现。具体请参考jquery.preload.js插件。
总结：实际的项目中，建议使用jquery.preload.js插件实现预加载技术，提高页面性能。
简单理解预加载技术
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。