利用CSS、JavaScript及Ajax实现图片预加载的方法


Posted in Javascript onNovember 29, 2016

预加载图片是提高用户体验的一个很好方法。图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度。这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速、无缝地发布,也可帮助用户在浏览你网站内容时获得更好的用户体验。本文将分享三个不同的预加载技术,来增强网站的性能与可用性。

实现图片预加载可以使用css、JavaScript、Ajax三种方法。下面分别介绍这些方法的实现。

使用CSS

单纯的使用css可以将图片加载到页面元素的背景上,这种方法简单、高效:

#div1{background:url(http://ww1.sinaimg.cn/large/006y8mN6gw1fa7kaed2hpj30sg0l9q54.jpg) no-repeat -9999px-9999px; }
#div2{background:url(http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg) no-repeat -9999px-9999px; }

在其他地方调用时,只要路径一致,浏览器就会在渲染过程中使用预加载(缓存)的图片。简单、高效,不需要任何JavaScript。

弊端:使用这种方法,图片会随着页面加载同时加载,延长页面加载的时间,使用JavaScript辅助完成会更高效。

使用CSS和JavaScript结合

functionpreload(){
if(document.getElementById) {
document.getElementById("div1").style.background ="url(http://ww1.sinaimg.cn/large/006y8mN6gw1fa7kaed2hpj30sg0l9q54.jpg) no-repeat -9999px -9999px";
document.getElementById("div2").style.background ="url(http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg) no-repeat -9999px -9999px";
} 
}
functionaddLoadEvent(func){
varoldonload =window.onload;
if(typeofwindow.onload !='function') {
window.onload = func;
} else{
window.onload =function(){
if(oldonload) {
oldonload(); 
} 
func(); 
} 
} 
}
addLoadEvent(preload);

我们把图片加载设置到页面加载完成之后,所以不必担心由于图片和页面同时加载而延长访问时间。

如果JavaScript运行失败也不必担心,仅仅是图片预加载失败而已,当调用图片时也能正常显示。

使用JavaScript实现

方法一

varimages =newArray()
functionpreload(){
for(i =0; i < preload.arguments.length; i++) {
images[i] = newImage()
images[i].src = preload.arguments[i] 
} 
}
preload( 
"http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg",
"http://ww1.sinaimg.cn/large/006y8mN6gw1fa7kaed2hpj30sg0l9q54.jpg"
)

方法二

这种方法其实和方法一是一样的原理 ,只不过没有放在数组中实现,而是分别去为 Image 对象的 src 负值。

if(document.images) {
img1 = newImage();
img2 = newImage();
img3 = newImage();
img1.src = "http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg";
img2.src = "http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg";
}

使用Ajax

假设上面的所有方法都不够酷炫,那么,还有一种方法,就是使用Ajax来实现图片的预加载。使用DOM来实现预加载,可以加载包括图片,CSS,JavaScript的其他任何东西。相对于直接使用JavaScript,使用Ajax的好处就是CSS和JavaScript可以在他们的内容不影响当前页面的情况下被预加载。对于图片来说这确实不是一个问题,尽管如此,这个方法依然很简洁高效:

window.onload =function(){
setTimeout(function(){
// XHR to request a JS and a CSS
varxhr =newXMLHttpRequest();
xhr.open('GET','http://domain.tld/preload.js');
xhr.send('');
xhr = newXMLHttpRequest();
xhr.open('GET','http://domain.tld/preload.css');
xhr.send('');
// preload image
newImage().src ="http://domain.tld/preload.png";
}, 1000);
};

就像这样,这段代码会预加载三个文件:preload.js,preload.css,preload.png。设置1秒的延时主要是防止加载JavaScript文件而导致正常页面的功能性问题。

为了将其封装起来,我们看看怎么使用原生JavaScript来写这一段代码:

window.onload =function(){
setTimeout(function(){
// reference to <head>
varhead =document.getElementsByTagName('head')[0];
// a new CSS
varcss =document.createElement('link');
css.type = 'text/css';
css.rel = 'stylesheet';
css.href = 'http://domain.tld/preload.css';
// a new JS
varjs =document.createElement('script');
js.type = 'text/javascript';
js.src = 'http://domain.tld/preload.js';
// preload JS and CSS
head.appendChild(css);
head.appendChild(js);
// preload image
newImage().src ='http://domain.tld/preload.png';
}, 1000);
};

在这里,我们通过DOM创建了三个元素来预加载了页面上的三个文件。正如原文中所提到的,对于Ajax来说,这个方法不是那么好。预加载的文件内容不应该添加到正在加载的页面中。

以上所述是小编给大家介绍的利用CSS、JavaScript及Ajax实现图片预加载的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
关于jQuery参考实例2.0 用jQuery选择元素
Apr 07 Javascript
js获取元素相对窗口位置的实现代码
Sep 28 Javascript
js与C#进行时间戳转换
Nov 14 Javascript
js实现仿爱微网两级导航菜单效果代码
Aug 31 Javascript
微信小程序  modal弹框组件详解
Oct 27 Javascript
jQuery Easyui datagrid行内实现【添加】、【编辑】、【上移】、【下移】
Dec 19 Javascript
详解Node.js实现301、302重定向服务
Apr 07 Javascript
简单实现JavaScript弹幕效果
Aug 27 Javascript
Node 代理访问的实现
Sep 19 Javascript
layer弹出框确定前验证:弹出消息框的方法(弹出两个layer)
Sep 21 Javascript
基于JavaScript实现贪吃蛇游戏
Mar 16 Javascript
JS script脚本中async和defer区别详解
Jun 24 Javascript
jQuery序列化表单成对象的简单实现
Nov 29 #Javascript
JS判断输入的字符串是否是数字的方法(正则表达式)
Nov 29 #Javascript
JS访问DOM节点方法详解
Nov 29 #Javascript
基于Node.js + WebSocket打造即时聊天程序嗨聊
Nov 29 #Javascript
浅谈js函数的多种定义方法与区别
Nov 29 #Javascript
原生JS简单实现ajax的方法示例
Nov 29 #Javascript
jQuery Checkbox 全选 反选的简单实例
Nov 29 #Javascript
You might like
PHP中CURL方法curl_setopt()函数的参数分享
2013/01/19 PHP
纯PHP生成的一个树叶图片画图例子
2014/04/16 PHP
php实现对两个数组进行减法操作的方法
2015/04/17 PHP
简单的自定义php模板引擎
2016/08/26 PHP
PHP 并发场景的几种解决方案
2019/06/14 PHP
Wordpress ThickBox 添加“查看原图”效果代码
2010/12/11 Javascript
动态加载iframe时get请求传递中文参数乱码解决方法
2014/05/07 Javascript
jQuery使用drag效果实现自由拖拽div
2015/06/11 Javascript
javascript js 操作数组 增删改查的简单实现
2016/06/20 Javascript
深入理解requestAnimationFrame的动画循环
2016/09/20 Javascript
js实现canvas图片与img图片的相互转换的示例
2017/08/31 Javascript
Node.js学习之地址解析模块URL的使用详解
2017/09/28 Javascript
微信小程序自定义导航栏
2018/12/31 Javascript
vue动画效果实现方法示例
2019/03/18 Javascript
微信小程序自定义顶部组件customHeader的示例代码
2020/06/03 Javascript
python中bisect模块用法实例
2014/09/25 Python
python搭建虚拟环境的步骤详解
2016/09/27 Python
Django objects的查询结果转化为json的三种方式的方法
2018/11/07 Python
使用selenium模拟登录解决滑块验证问题的实现
2019/05/10 Python
python之pexpect实现自动交互的例子
2019/07/25 Python
解决pycharm中导入自己写的.py函数出错问题
2020/02/12 Python
python GUI库图形界面开发之pyinstaller打包python程序为exe安装文件
2020/02/26 Python
canvas学习总结三之绘制路径-线段
2019/01/31 HTML / CSS
html5关于外链嵌入页面通信问题(postMessage解决跨域通信)
2020/07/20 HTML / CSS
匡威帆布鞋美国官网:Converse美国
2016/08/22 全球购物
加拿大在线旅游公司:Flighthub
2019/03/11 全球购物
客服主管岗位职责
2013/12/13 职场文书
国庆节文艺活动方案
2014/02/03 职场文书
爬山的活动方案
2014/08/16 职场文书
综治维稳工作承诺书
2014/08/30 职场文书
2014年消防工作总结
2014/11/21 职场文书
高中生综合素质评价范文
2015/08/18 职场文书
《神奇的鸟岛》教学反思
2016/02/22 职场文书
关于考试抄袭的检讨书
2019/11/02 职场文书
Nginx配置SSL证书出错解决方案
2021/03/31 Servers
SpringBoot前端后端分离之Nginx服务器下载安装过程
2022/08/14 Servers