js预加载
意义:
与懒加载相反,有时我们需要实现例如快速快速切换页面、图片之类的功能时,能尽快的加载出我们所需的图片会极大提升用户体验,这时用预加载将图片先缓存到浏览器,用户使用需显示图片时无疑会顺畅很多。
原理:
1.在html中用img标签
2.使用JavaScript的Imgage对象
3.ajax请求图片
4.preload.js插件
实现
1.使用html文档中img标签
<img src="./img/loading.jpg" alt="图片" style="display:none">
执行文档时直接加载进来只不过让其不显示
2.使用Imgage对象
var img=new Image()
img.src="http://www.wwenj.com/img/1.jpg"
js中执行到该语句后就会加载进来
3.使用ajax请求图片
直接用ajax请求很好理解不贴代码,
优点:ajax请求过程中能有更加详细的操作
缺点:有跨域
-
preload.js预加载插件
"PreloadJS"便于预先加载资源:图像、声音、数据、或其他的JS [PreloadJS插件地址:](http://www.createjs.cc/preloadjs/)[http://www.createjs.cc/preloadjs/]
(PreloadJS提供了一个一致的方式预先加载在HTML应用的内容,以及预加载可以使用HTML标
签作为XHR完成。
默认, PreloadJS 将尝试使用XHR加载内容,因为它提供了进度和完成事件方面的更好支持,
然而由于跨域的问题,它可能仍然是优选使用基于标签的负载代替)
代码:
var queue = new createjs.LoadQueue();
queue.on("complete", handleComplete, this);
queue.loadManifest([
{id: "myImage", src:"path/to/myImage.jpg"}
]);
function handleComplete() {
var image = queue.getResult("myImage");
document.body.appendChild(image);
}
这就是图片预加载的实现。