您的位置：首页 > Web前端 > JavaScript

利用CSS、JavaScript及Ajax实现图片预加载的三大方法及优缺点分析

2013-12-08 16:35 841 查看

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

方法一：用CSS和JavaScript实现预加载
实现预加载图片有很多方法，包括使用CSS、JavaScript及两者的各种组合。这些技术可根据不同设计场景设计出相应的解决方案，十分高效。
单纯使用CSS，可容易、高效地预加载图片，代码如下：

window.onload = function() {

setTimeout(function() {

// reference to <head>
var head = document.getElementsByTagName('head')[0];

// a new CSS
var css = document.createElement('link');
css.type = "text/css";
css.rel  = "stylesheet";
css.href = "http://domain.tld/preload.css";

// a new JS
var js  = 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
new Image().src = "http://domain.tld/preload.png";

}, 1000);

};

View Code
这里，我们通过DOM创建三个元素来实现三个文件的预加载。正如上面提到的那样，使用Ajax，加载文件不会应用到加载页面上。从这点上看，Ajax方法优越于JavaScript。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航