利用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 相关文章推荐
JavaScript入门教程(1) 什么是JS
Jan 31 Javascript
javascript 操作符(~、&amp;、|、^、)使用案例
Dec 31 Javascript
Javascript实现汉字和拼音互转的终极方案
Oct 19 Javascript
Javascript基于jQuery UI实现选中区域拖拽效果
Nov 25 Javascript
js中字符型和数值型数字的互相转化方法(必看)
Apr 25 Javascript
基于Vue实现后台系统权限控制的示例代码
Aug 29 Javascript
react以create-react-app为基础创建项目
Mar 14 Javascript
使用Angular CLI生成 Angular 5项目教程详解
Mar 18 Javascript
使用JSON格式提交数据到服务端的实例代码
Apr 01 Javascript
微信小程序实现动态列表项的顺序加载动画
Jul 25 Javascript
vue+webpack 更换主题N种方案优劣分析
Oct 28 Javascript
vue实现图片上传预览功能
Dec 23 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自动生成月历代码
2006/10/09 PHP
两千行代码的PHP学习笔记汇总
2014/10/05 PHP
php简单分页类实现方法
2015/02/26 PHP
php判断用户是否手机访问代码
2015/06/08 PHP
PHP中header函数的用法及其注意事项详解
2016/06/13 PHP
js格式化时间和js格式化时间戳示例
2014/02/10 Javascript
jquery实现手机发送验证码的倒计时代码
2014/02/12 Javascript
jQuery中prev()方法用法实例
2015/01/08 Javascript
jQuery插件实现控制网页元素动态居中显示
2015/03/24 Javascript
js实现文本框选中的方法
2015/05/26 Javascript
JS实现的鼠标跟随代码(卡通手型点击效果)
2015/10/26 Javascript
JavaScript函数的一些注意要点小结及js匿名函数
2015/11/10 Javascript
如何防止INPUT按回车自动提交表单FORM
2016/12/06 Javascript
javascript实现将数字转成千分位的方法小结【5种方式】
2016/12/11 Javascript
web 屏蔽BackSpace键实例代码
2016/12/24 Javascript
JS实现分页浏览横向图片(类轮播)实例代码
2017/11/06 Javascript
Vuejs在v-for中,利用index来对第一项添加class的方法
2018/03/03 Javascript
Bootstrap Table列宽拖动的方法
2018/08/15 Javascript
jQuery实现鼠标移到某个对象时弹出显示层功能
2018/08/23 jQuery
node使用async_hooks模块进行请求追踪
2021/01/28 Javascript
[01:09:01]完美世界DOTA2联赛循环赛 Magma vs PXG BO2第一场 10.28
2020/10/28 DOTA
Python的Bottle框架中获取制定cookie的教程
2015/04/24 Python
详解如何在Apache中运行Python WSGI应用
2019/01/02 Python
Python实现打砖块小游戏代码实例
2019/05/18 Python
python3在同一行内输入n个数并用列表保存的例子
2019/07/20 Python
基于HTML5代码实现折叠菜单附源码下载
2015/11/27 HTML / CSS
一站式跨境收款解决方案:Payoneer(派安盈)
2018/09/06 全球购物
Nordgreen台湾官网:极简北欧设计手表
2019/08/21 全球购物
西铁城美国官方网站:Citizen Watch美国
2019/11/08 全球购物
澳大利亚购买健身器材网站:Gym Direct
2019/12/19 全球购物
学雷锋宣传标语
2014/06/25 职场文书
2015年民主生活会发言材料
2014/12/15 职场文书
结婚保证书(卖身契)
2015/02/26 职场文书
初中思想品德教学反思
2016/02/24 职场文书
成本低的5个创业项目:投资小、赚钱快
2019/08/20 职场文书
浅谈spring boot使用thymeleaf版本的问题
2021/08/04 Java/Android