脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js ajax 图片预加载

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

 更新时间：2016年11月29日 09:26:57   投稿：mrr  
预加载图片是提高用户体验的一个很好方法，实现图片预加载可以使用css、JavaScript、Ajax三种方法。下面逐一给大家介绍利用CSS、JavaScript及Ajax实现图片预加载的方法，需要的朋友参考下吧

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

实现图片预加载可以使用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实现图片预加载的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

相关文章

  • JS实现中国公民身份证号码有效性验证

    JS实现中国公民身份证号码有效性验证

    这篇文章主要介绍了JS实现中国公民身份证号码有效性验证,非常不错，具有参考借鉴价值，需要的朋友可以参考下
    2017-02-02
  • JS代码实现电脑配置检测功能

    JS代码实现电脑配置检测功能

    这篇文章主要介绍了JS代码实现电脑配置检测功能,需要的朋友可以参考下
    2018-03-03
  • JavaScript数组操作总结

    JavaScript数组操作总结

    JavaScript中的Array对象与其他编程语言中的数组一样，是一组数据的集合。在JavaScript中，数组里面的数据可以是不同类型的，并具有用于执行数组常见操作的方法，本文整理了一些常用的，需要的可以参考一下
    2022-10-10
  • wavesurfer.js绘制音频波形图的实现

    wavesurfer.js绘制音频波形图的实现

    这篇文章主要介绍了wavesurfer.js绘制音频波形图的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-04-04
  • Javascript delete 引用类型对象

    Javascript delete 引用类型对象

    很少使用javascript的delete，最近因为一个小bug发现删除引用类型对象的时候有一点不同
    2013-11-11
  • js绘制购物车抛物线动画

    js绘制购物车抛物线动画

    这篇文章主要为大家详细介绍了js绘制购物车抛物线动画，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-09-09
  • 深入理解javascript中concat方法

    深入理解javascript中concat方法

    本文主要介绍了javascript中concat方法，主要分为2小节内容：1.concat方法的基础介绍；2.从实例中感受concat方法。需要的朋友一起来看下吧
    2016-12-12
  • js实现抽奖功能

    js实现抽奖功能

    这篇文章主要为大家详细介绍了js实现抽奖功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-11-11
  • JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动效果示例

    JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动效果示例

    这篇文章主要介绍了JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动效果,涉及javascript事件响应及页面元素属性动态操作相关实现技巧,需要的朋友可以参考下
    2019-01-01
  • js中class的点击事件没有效果的解决方法

    js中class的点击事件没有效果的解决方法

    下面小编就为大家带来一篇js中class的点击事件没有效果的解决方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-10-10

最新评论