当前位置:  首页  >  PHP资讯  >  业界资讯

多种js图片预加载实现方式分享

这篇文章主要为大家详细介绍了多种js图片预加载实现方式,包括html标签或css加载图片、纯js实现预加载,感兴趣的小伙伴们可以参考一下

图片预加载有大体有几种方式

 1.html标签或css加载图片

  显而易见我们使用img标签或者通过标签的background-image属性都可以实现图片的预加载。但是为了避免初次载入过多图片影响体验。一般最好在文档渲染完成以后再加载(使用window.onload等)。

 2.纯js实现预加载

空城计-Code记的Javascript实现图片的预加载的完整实现的预加载实例为

 function preloadimages(arr){ var newimages=[], loadedimages=0 var postaction=function(){} //此处增加了一个postaction函数 var arr=(typeof arr!="object")? [arr] : arr function imageloadpost(){ loadedimages++ if (loadedimages==arr.length){ postaction(newimages) //加载完成用我们调用postaction函数并将newimages数组做为参数传递进去 } } for (var i=0; i 

  原理就是循环创建Image对象,并设置对象的src为指定图片,然后监听图片加载完成Onload= function(){imageloadpost()},当图片加载完成后就会执行到imageloadpost。原来IE6还有一个问题:如果预加载的图片已经在内存中则不会再次出发img.onload事件。但是IE7+都没有问题了。其他浏览器也没有问题,所以上面这种img.onload监听事件已经没有兼容问题了。

 3.Ajax实现预加载

  ajax请求是任何数据都可以请求的,图片也不例外。先看一下js/css预加载

 // XHR to request a JS and a CSS var xhr = new XMLHttpRequest(); xhr.open('GET', 'http://domain.tld/preload.js'); xhr.send(''); xhr = new XMLHttpRequest(); xhr.open('GET', 'http://domain.tld/preload.css'); xhr.send(''); 

而图片的ajax预加载实际和纯js预加载图片一样

 new Image().src = "http://domain.tld/preload.png"; 

只不过这里的解释成了ajax加载,可以理解new Image都是ajax get请求。

以上就是本文的全部内容,希望对大家理解js图片预加载有所帮助。

内容推荐:免费高清PNG素材下载
吐了个 "CAO" !
扫码关注 PHP1 官方微信号
PHP1.CN | 中国最专业的PHP中文社区 | PNG素材下载 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved PHP1.CN 第一PHP社区 版权所有 京ICP备19059560号-4