利用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滚动字幕效果实现代码
Jun 22 Javascript
javascript之typeof、instanceof操作符使用探讨
May 19 Javascript
浅谈JavaScript事件的属性列表
Mar 01 Javascript
PageSwitch插件实现100种不同图片切换效果
Jul 28 Javascript
利用Angularjs和Bootstrap前端开发案例实战
Aug 27 Javascript
js HTML5手机刮刮乐代码
Sep 29 Javascript
Vue.js实现价格计算器功能
Mar 30 Javascript
vue mixins组件复用的几种方式(小结)
Sep 06 Javascript
JS浅拷贝和深拷贝原理与实现方法分析
Feb 28 Javascript
JSON获取属性值方法代码实例
Jun 30 Javascript
JavaScript实现与web通信的方法详解
Aug 07 Javascript
原生JavaScript实现刮刮乐
Sep 29 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启用sphinx全文搜索的实现方法
2014/12/24 PHP
AJAX的使用方法详解
2017/04/29 PHP
PHP单例模式模拟Java Bean实现方法示例
2018/12/07 PHP
Javascript的一种模块模式
2010/09/08 Javascript
基于jquery的鼠标拖动效果代码
2012/05/30 Javascript
js 动态为textbox添加下拉框数据源的方法
2014/04/24 Javascript
js中的setInterval和setTimeout使用实例
2014/05/09 Javascript
javascript搜索框点击文字消失失焦时文本出现
2014/09/18 Javascript
js实现同一页面多个不同运动效果的方法
2015/04/10 Javascript
js代码实现无缝滚动(文字和图片)
2015/08/20 Javascript
JavaScript String 对象常用方法详解
2016/05/13 Javascript
AngularJS教程之简单应用程序示例
2016/08/16 Javascript
vue+vuecli+webpack中使用mockjs模拟后端数据的示例
2017/10/24 Javascript
web前端vue之vuex单独一文件使用方式实例详解
2018/01/11 Javascript
vue axios请求拦截实例代码
2018/03/29 Javascript
AngularJS 前台分页实现的示例代码
2018/06/07 Javascript
自定义Vue中的v-module双向绑定的实现
2019/04/17 Javascript
Vue CLI2升级至Vue CLI3的方法步骤
2019/05/20 Javascript
[48:22]VGJ.S vs VG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python表示矩阵的方法分析
2017/05/26 Python
python3.5绘制随机漫步图
2018/08/27 Python
在python中利用opencv简单做图片比对的方法
2019/01/24 Python
Django web框架使用url path name详解
2019/04/29 Python
python爬虫解决验证码的思路及示例
2019/08/01 Python
python实现爬虫抓取小说功能示例【抓取金庸小说】
2019/08/09 Python
Python字典常见操作实例小结【定义、添加、删除、遍历】
2019/10/25 Python
最简单的matplotlib安装教程(小白)
2020/07/28 Python
matplotlib部件之套索Lasso的使用
2021/02/24 Python
Avène雅漾美国官方网站:敏感肌肤护理专家
2016/10/24 全球购物
贝嫂喜欢的婴儿品牌,个性化的婴儿礼物:My 1st Years
2017/11/19 全球购物
违反学校规定检讨书
2014/01/18 职场文书
办公室员工岗位工作职责
2014/03/10 职场文书
开学典礼决心书
2014/03/11 职场文书
承诺书范本
2015/01/21 职场文书
2015年度招聘工作总结
2015/05/28 职场文书
netty 实现tomcat的示例代码
2022/06/05 Servers