利用CSS、JavaScript及Ajax实现图片预加载的三大方法
发表于 16:17|
来源Perishable Press|
作者Perishable Press
摘要：图片的加载速度往往影响着网站整体的用户体验，尤其对于包含大量图片的网站。对图片进行预加载，不失为一个高效的解决方案。如何实现预加载？本文将例举利用CSS、JavaScript及Ajax实现图片预加载的三大方法。
Perishable Press网站近日发表了一篇文章《》，分享了利用CSS、JavaScript及Ajax实现图片预加载的三大方法。下面为译文。预加载图片是提高用户体验的一个很好方法。图片预先加载到浏览器中，访问者便可顺利地在你的网站上冲浪，并享受到极快的加载速度。这对图片画廊及图片占据很大比例的网站来说十分有利，它保证了图片快速、无缝地发布，也可帮助用户在浏览你网站内容时获得更好的用户体验。本文将分享三个不同的预加载技术，来增强网站的性能与可用性。方法一：用CSS和JavaScript实现预加载实现预加载图片有很多方法，包括使用CSS、JavaScript及两者的各种组合。这些技术可根据不同设计场景设计出相应的解决方案，十分高效。单纯使用CSS，可容易、高效地预加载图片，代码如下：#preload-01 { background: url(http://domain.tld/image-01.png) no-repeat -9999px -9999 }
#preload-02 { background: url(http://domain.tld/image-02.png) no-repeat -9999px -9999 }
#preload-03 { background: url(http://domain.tld/image-03.png) no-repeat -9999px -9999 }将这三个ID选择器应用到(X)HTML元素中，我们便可通过CSS的background属性将图片预加载到屏幕外的背景上。只要这些图片的路径保持不变，当它们在Web页面的其他地方被调用时，浏览器就会在渲染过程中使用预加载（缓存）的图片。简单、高效，不需要任何JavaScript。该方法虽然高效，但仍有改进余地。使用该法加载的图片会同页面的其他内容一起加载，增加了页面的整体加载时间。为了解决这个问题，我们增加了一些JavaScript代码，来推迟预加载的时间，直到页面加载完毕。代码如下：// better image preloading @
function preloader() {
if (document.getElementById) {
document.getElementById("preload-01").style.background = "url(http://domain.tld/image-01.png) no-repeat -9999px -9999px";
document.getElementById("preload-02").style.background = "url(http://domain.tld/image-02.png) no-repeat -9999px -9999px";
document.getElementById("preload-03").style.background = "url(http://domain.tld/image-03.png) no-repeat -9999px -9999px";
function addLoadEvent(func) {
var oldonload = window.
if (typeof window.onload != 'function') {
window.onload =
window.onload = function() {
if (oldonload) {
oldonload();
addLoadEvent(preloader);在该脚本的第一部分，我们获取使用类选择器的元素，并为其设置了background属性，以预加载不同的图片。该脚本的第二部分，我们使用addLoadEvent()函数来延迟preloader()函数的加载时间，直到页面加载完毕。如果JavaScript无法在用户的浏览器中正常运行，会发生什么？很简单，图片不会被预加载，当页面调用图片时，正常显示即可。方法二：仅使用JavaScript实现预加载上述方法有时确实很高效，但我们逐渐发现它在实际实现过程中会耗费太多时间。相反，我更喜欢使用纯JavaScript来实现图片的预加载。下面将提供两种这样的预加载方法，它们可以很漂亮地工作于所有现代浏览器之上。JavaScript代码段1只需简单编辑、加载所需要图片的路径与名称即可，很容易实现：&div class="hidden"&
&script type="text/javascript"&
&!--//--&&![CDATA[//&&!--
var images = new Array()
function preload() {
for (i = 0; i & preload.arguments. i++) {
images[i] = new Image()
images[i].src = preload.arguments[i]
"http://domain.tld/gallery/image-001.jpg",
"http://domain.tld/gallery/image-002.jpg",
"http://domain.tld/gallery/image-003.jpg"
//--&&!]]&
&/div&该方法尤其适用预加载大量的图片。我的画廊网站使用该技术，预加载图片数量达50多张。将该脚本应用到登录页面，只要用户输入登录帐号，大部分画廊图片将被预加载。&JavaScript代码段2该方法与上面的方法类似，也可以预加载任意数量的图片。将下面的脚本添加入任何Web页中，根据程序指令进行编辑即可。&div class="hidden"&
&script type="text/javascript"&
&!--//--&&![CDATA[//&&!--
if (document.images) {
img1 = new Image();
img2 = new Image();
img3 = new Image();
img1.src = "http://domain.tld/path/to/image-001.gif";
img2.src = "http://domain.tld/path/to/image-002.gif";
img3.src = "http://domain.tld/path/to/image-003.gif";
//--&&!]]&
&/div&正如所看见，每加载一个图片都需要创建一个变量，如“img1&=&new&Image();”，及图片源地址声明，如“img3.src&=&"../path/to/image-003.gif";”。参考该模式，你可根据需要加载任意多的图片。我们又对该方法进行了改进。将该脚本封装入一个函数中，并使用&addLoadEvent（），延迟预加载时间，直到页面加载完毕。function preloader() {
if (document.images) {
var img1 = new Image();
var img2 = new Image();
var img3 = new Image();
img1.src = "http://domain.tld/path/to/image-001.gif";
img2.src = "http://domain.tld/path/to/image-002.gif";
img3.src = "http://domain.tld/path/to/image-003.gif";
function addLoadEvent(func) {
var oldonload = window.
if (typeof window.onload != 'function') {
window.onload =
window.onload = function() {
if (oldonload) {
oldonload();
addLoadEvent(preloader);方法三：使用Ajax实现预加载上面所给出的方法似乎不够酷，那现在来看一个使用Ajax实现图片预加载的方法。该方法利用DOM，不仅仅预加载图片，还会预加载CSS、JavaScript等相关的东西。使用Ajax，比直接使用JavaScript，优越之处在于JavaScript和CSS的加载不会影响到当前页面。该方法简洁、高效。window.onload = function() {
setTimeout(function() {
// XHR to request a JS and a CSS
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://domain.tld/preload.js');
xhr.send('');
xhr = new XMLHttpRequest();
xhr.open('GET', 'http://domain.tld/preload.css');
xhr.send('');
// preload image
new Image().src = "http://domain.tld/preload.png";
};上面代码预加载了“preload.js”、“preload.css”和“preload.png”。1000毫秒的超时是为了防止脚本挂起，而导致正常页面出现功能问题。下面，我们看看如何用JavaScript来实现该加载过程：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";
= "stylesheet";
css.href = "http://domain.tld/preload.css";
// a new JS
= document.createElement("script");
js.type = "text/javascript";
= "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";
};这里，我们通过DOM创建三个元素来实现三个文件的预加载。正如上面提到的那样，使用Ajax，加载文件不会应用到加载页面上。从这点上看，Ajax方法优越于JavaScript。如果你还有什么好的图片预加载方法，及对上述方法的改进建议，欢迎在评论中分享。（编译：陈秋歌 审校：夏梦竹）原文链接：
推荐阅读相关主题：
CSDN官方微信
扫描二维码,向CSDN吐槽
微信号：CSDNnews
相关热门文章javascript（138）
预加载与懒加载，我们经常经常用到，这些技术不仅仅限于图片加载，我们今天讨论的是图片加载：
一、什么是图片预加载与懒加载：
图片预加载：顾名思义，图片预加载就是在网页全部加载之前，提前加载图片。当用户需要查看时可直接从本地缓存中渲染，以提供给用户更好的体验，减少等待的时间。否则，如果一个页面的内容过于庞大，没有使用预加载技术的页面就会长时间的展现为一片空白，这样浏览者可能以为图片预览慢而没兴趣浏览，把网页关掉，这时，就需要图片预加载。当然这种做法实际上牺牲了服务器的性能换取了更好的用户体验。
图片懒加载（缓载）：延迟加载图片或符合某些条件时才加载某些图片。这样做的好处是减少不必要的访问数据库或延迟访问数据库的次数，因为每次访问数据库都是比较耗时的即只有真正使用该对象的数据时才会创建。懒加载的主要目的是作为服务器前端的优化，减少请求数或延迟请求数。
二、图片预加载与懒加载的区别：
两者的行为是相反的，一个是提前加载，一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用，预载则会增加服务器前端压力。
三、图片预加载与懒加载实现：
1、实现图片预加载：
实现预载的方法非常多，可以用CSS(background)、JS(Image)、HTML(&img /&)都可以。常用的是new Image();，设置其src来实现预载，再使用onload方法回调预载完成事件。只要浏览器把图片下载到本地，同样的src就会使用缓存，这是最基本也是最实用的预载方法。当Image下载完图片头后，会得到宽和高，因此可以在预载前得到图片的大小(我所知的方法是用记时器轮循宽高变化)。一般实现预载的工具类，都实现一个Array来存需要预载的URL，然后实现Finish、Error、SizeChange等常用事件，可以由用户选择是顺序预载或假并发预载。Jquery的PreLoad可以用于预载。
&!DOCTYPE html&
&html xmlns=&http://www.w3.org/1999/xhtml&&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&
&title&img ready&/title&
&button id=&testReadyBtn&&开始加载图片&/button&
&button id=&clsCacheBtn&&清空缓存&/button&
&p&(如果图片加载过后，浏览器会缓存)&/p&
&div id=&status& style=&display:none&&
&p&&strong&imgReady:&/strong&&p&
&p id=&statusReady&&&/p&
&p&&strong&imgLoad:&/strong&&/p&
&p id=&statusLoad&&&p&
&div id=&imgWrap&&&/div&
&div style=&display:none&&&/div&
var imgReady = function (url, callback, error) {
var width, height, intervalId, check, div,img = new Image(),
body = document.
// 从缓存中读取
if (plete) {
return callback(img.width, img.height);
// 通过占位提前获取图片头部数据
if (body) {
div = document.createElement('div');
div.style.cssText = 'visibility:position:left:0;top:0;width:1height:1overflow:hidden';
div.appendChild(img)
body.appendChild(div);
width = img.offsetW
height = img.offsetH
check = function () {
if (img.offsetWidth !== width || img.offsetHeight !== height) {
clearInterval(intervalId);
callback(img.offsetWidth, img.clientHeight);
img.onload =
div.innerHTML = '';
div.parentNode.removeChild(div);
intervalId = setInterval(check, 150);
// 加载完毕后方式获取
img.onload = function () {
callback(img.width, img.height);
img.onload = img.onerror =
clearInterval(intervalId);
body && img.parentNode.removeChild(img);
// 图片加载错误
img.onerror = function () {
error && error();
clearInterval(intervalId);
body && img.parentNode.removeChild(img);
/* demo script */
window.onload = function () {
var imgUrl = '/demo/imgReady/vistas24.jpg?',
testReadyBtn = document.getElementById('testReadyBtn'),
clsCacheBtn = document.getElementById('clsCacheBtn'),
status = document.getElementById('status'),
statusReady = document.getElementById('statusReady'),
statusLoad = document.getElementById('statusLoad'),
imgWrap = document.getElementById('imgWrap');
var imgLoad = function (url, callback) {
var img = new Image();
if (plete) {
callback(img.width, img.height);
img.onload = function () {
callback(img.width, img.height);
img.onload =
testReadyBtn.onclick = function () {
var that =
that.disabled =
status.style.display = 'block';
statusLoad.innerHTML = statusReady.innerHTML = 'Loading...';
imgWrap.innerHTML = '&img src=&' + imgUrl + '& /&';
// 使用占位方式快速获取大小
imgReady(imgUrl, function (width, height) {
statusReady.innerHTML = 'width:' + width + '; height:' +
}, function () {
statusReady.innerHTML = 'Img Error!';
// 使用传统方式获取大小
imgLoad(imgUrl, function (width, height) {
statusLoad.innerHTML = 'width:' + width + '; height:' +
that.disabled =
}, function () {
statusLoad.innerHTML = 'Img Error!';
that.disabled =
clsCacheBtn.onclick = function () {
imgUrl += new Date().getTime();
status.style.display = 'none';
imgWrap.innerHTML = '';
2、懒加载实现：
第一种是纯粹的延迟加载，使用setTimeOut或setInterval进行加载延迟，如果用户在加载前就离开了页面，那么就不会加载。&
第二种是条件加载，符合某些条件，或触发了某些事件才开始异步下载。
&第三种是可视区加载，即仅加载用户可以看到的区域，这个主要由监控滚动条来实现，一般会在距用户看到某图片前一定距离遍开始加载，这样能保证用户拉下时正好能看到图片。
Jquery的Lazy Load用于图片缓载
&!DOCTYPE html&
&meta charset=&utf-8& /&
&title&原生Js图片延迟加载&/title&
&style type=&text/css&&
*{margin: 0;padding: 0}
img.scrollLoading{border: 1px solid #display:margin-top: 10}
&div id=&content&&
&script type=&text/javascript&&
var _CalF = {
zsl: function(object) { //选择器
if (object === undefined)
var getArr = function(name, tagName, attr) {
var tagName = tagName || '*',
eles = document.getElementsByTagName(tagName),
clas = (typeof document.body.style.maxHeight === &undefined&) ? &className&: &class&; //ie6
attr = attr || clas,
for (var i = 0; i & eles. i++) {
if (eles[i].getAttribute(attr) == name) {
Arr.push(eles[i]);
if (object.indexOf('#') === 0) { //#id
return document.getElementById(object.substring(1));
} else if (object.indexOf('.') === 0) { //.class
return getArr(object.substring(1));
} else if (object.match(/=/g)) { //attr=name
return getArr(object.substring(object.search(/=/g) + 1), null, object.substring(0, object.search(/=/g)));
} else if (object.match(/./g)) { //tagName.className
return getArr(object.split('.')[1], object.split('.')[0]);
getPosition: function(obj) { //获取元素在页面里的位置和宽高
var top = 0,
width = obj.offsetWidth,
height = obj.offsetH
while (obj.offsetParent) {
top += obj.offsetT
left += obj.offsetL
obj = obj.offsetP
&top&: top,
&left&: left,
&width&: width,
&height&: height
//添加图片list
var _temp = [];
for (var i = 1; i & 21; i++) {
_temp.push('&img class=&scrollLoading& data-src=&/cnblogs_com/Darren_code/311197/o_' + i + '.jpg& src=&/blog/306/dd9aa9a2aced2c9118bc.gif&
/&&br /&图片' + i);
_CalF.zsl(&#content&).innerHTML = _temp.join(&&);
function scrollLoad() {
this.init.apply(this, arguments);
scrollLoad.prototype = {
init: function(className) {
var className = &img.& + className,
imgs = _CalF.zsl(className),
this.imgs =
that.loadImg();
window.onscroll = function() {
that.time = setTimeout(function() {
that.loadImg();
loadImg: function() {
var imgs = this.imgs.reverse(),
//获取数组翻转
len = imgs.
if (imgs.length === 0) {
clearTimeout(this.time);
for (var j = len - 1; j &= 0; j--) { //递减
var img = imgs[j],
imgTop = _CalF.getPosition(img).top,
imgSrc = img.getAttribute(&data-src&),
offsetPage = window.pageYOffset ? window.pageYOffset: window.document.documentElement.scrollTop,
//滚动条的top值
bodyHeight = document.documentElement.clientH //body的高度
if ((offsetPage + bodyHeight / 2) & (imgTop - bodyHeight / 2)) {
img.src = imgS
this.imgs.splice(j, 1);
var img1 = new scrollLoad(&scrollLoading&);
获取屏幕的分辨率
&script type=&text/javascript&&
document.write('您的显示器分辨率为:\n' + screen.width + '*' + screen.height + '&/br&');
var ww = document.getElementById(&con&).offsetWidth, w = screen.width/ww, h = screen.height/ww, r = Math.round(Math.sqrt(w*w + h*h) / 2.54);
document.write('您的显示器尺寸为:\n' + (screen.width/ww).toFixed(1) + '*' + (screen.height/ww).toFixed(1) + ' cm, '+ r +'寸&br/&');
源引：http://bianhua1314./blog/static//
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：121177次
积分：1743
积分：1743
排名：第17622名
转载：432篇
(3)(25)(26)(50)(11)(1)(7)(3)(22)(42)(27)(64)(6)(3)(11)(62)(32)(1)(1)(18)(23)还没有任何记录...
按需要延时加载图片和ajax方式加载页面jQuery插件
来源：jquery 特效
作者： 懒人建站
有时候页面上的图片非常多，比如一个大量图片的营销型单页面，如果不采取一些延时按需要加载图片一次性读入图片，页面会加载很长时间，用户体验大大的不好。 这个jquery插件实现
有时候页面上的图片非常多，比如一个大量图片的营销型单页面，如果不采取一些延时按需要加载图片一次性读入图片，页面会加载很长时间，用户体验大大的不好。
这个jquery插件实现按需要延时加载图片和ajax方式加载页面，jquery代码短小精悍。灰常给力，给力就到点两下广告，表示支持工作。
&script type=&text/javascript& src=&/js/jquery/1.4.1/jquery.min.js&&&/script&
&script type=&text/javascript& src=&jq.scrollLoading.js&&&/script&
$(function() {
&& &$(&.scrollLoading&).scrollLoading();
按需要延时加载图片和ajax方式加载页面jQuery插件代码：
(function($) {
&& &$.fn.scrollLoading = function(options) {
&& &&& &var defaults = {
&& &&& &&& &attr: &data-url&&& &
&& &&& &};
&& &&& &var params = $.extend({}, defaults, options || {});
&& &&& ¶ms.cache = [];
&& &&& &$(this).each(function() {
&& &&& &&& &var node = this.nodeName.toLowerCase(), url = $(this).attr(params[&attr&]);
&& &&& &&& &if (!url) { }
&& &&& &&& &//重组
&& &&& &&& &var data = {
&& &&& &&& &&& &obj: $(this),
&& &&& &&& &&& &tag: node,
&& &&& &&& &&& &url: url
&& &&& &&& &};
&& &&& &&& ¶ms.cache.push(data);
&& &&& &});
&& &&& &//动态显示数据
&& &&& &var loading = function() {
&& &&& &&& &var st = $(window).scrollTop(), sth = st + $(window).height();
&& &&& &&& &$.each(params.cache, function(i, data) {
&& &&& &&& &&& &var o = data.obj, tag = data.tag, url = data.
&& &&& &&& &&& &if (o) {
&& &&& &&& &&& &&& &post = o.offset(). posb = post + o.height();
&& &&& &&& &&& &&& &if ((post & st && post & sth) || (posb & st && posb & sth)) {
&& &&& &&& &&& &&& &&& &//在浏览器窗口内
&& &&& &&& &&& &&& &&& &if (tag === &img&) {
&& &&& &&& &&& &&& &&& &&& &//图片，改变src
&& &&& &&& &&& &&& &&& &&& &o.attr(&src&, url);&& &
&& &&& &&& &&& &&& &&& &} else {
&& &&& &&& &&& &&& &&& &&& &o.load(url);
&& &&& &&& &&& &&& &&& &}&& &
&& &&& &&& &&& &&& &&& &data.obj =&& &&& &
&& &&& &&& &&& &&& &}
&& &&& &&& &&& &}
&& &&& &&& &});&& &&& &
&& &&& &&& &&& &
&& &&& &};
&& &&& &//事件触发
&& &&& &//加载完毕即执行
&& &&& &loading();
&& &&& &//滚动执行
&& &&& &$(window).bind(&scroll&, loading);
})(jQuery);
本文链接：/js/jquery/651.html
(责任编辑：懒人建站)
按需要延时加载图片和ajax方式加载页面jQuery插件由懒人建站收集整理，您可以自由传播，请主动带上本文链接
就是免费分享，觉得有用就多来支持一下，没有能帮到您，懒人也只能表示遗憾，希望有一天能帮到您。
按需要延时加载图片和ajax方式加载页面jQuery插件-相关文章
评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）12069人阅读
Objective-C（19）
IOS如何选择图片加载方式：imageNamed和imageWithContentsOfFile的区别
原文地址：
转载请注明出处
如果觉得文章对你有所帮助，请通过留言或关注微信公众帐号wangzzstrive来支持我，谢谢！
IOS内存稀缺，而图片资源通常又是最占内存的部分之一，因此，选择如何加载图片，对于优化应用内存占用量，能起到立竿见影的效果。通常加载图片的方式有两种：
一、imageNamed
为什么有两种方法完成同样的事情呢？imageNamed的优点在于可以缓存已经加载的图片。苹果的文档中有如下说法：
This method looks in the system caches for an image object with the specified name and returns that
object if it exists. If a matching image object is not already in the cache, this method locates and loads the image data from disk or asset catelog, and then returns the resulting object. You can not assume that this method is thread safe.
这种方法会首先在系统缓存中根据指定的名字寻找图片，如果找到了就返回。如果没有在缓存中找到图片，该方法会从指定的文件中加载图片数据，并将其缓存起来，然后再把结果返回，下次再使用该名称图片的时候就省去了从硬盘中加载图片的过程。对于相同名称的图片，系统只会把它Cache到内存一次。
另外，在iOS4及以上系统中，如果是PNG格式的图片，使用该方法加载时不用再指定文件的.png后缀，即只写文件名称即可。
最后，在iOS4及以上系统中，如果屏幕的scale是2（即高分辨率屏幕），该方法会自动使用加上@2x后缀的图片。比如在高分辨率屏幕设备上要加载名称为button的图片，该方法会自动使用名称为button@2x的图片；如果找不到该名称图片再去加载名称为button的图片。这就为开发者省去了适配高、低分辨率屏幕的时间。
二、imageWithContentsOfFile或者imageWithData
而imageWithContentsOfFile方法只是简单的加载图片，并不会将图片缓存起来，图像会被系统以数据方式加载到程序。当你不需要重用该图像，或者你需要将图像以数据方式存储到数据库，又或者你要通过网络下载一个很大的图像时，可以使用这种方式。
三、如何选择
两种加载图片方法的使用方式：
UIImage *img = [UIImage imageNamed:@&myImage&]; // caching
UIImage *img = [UIImage imageWithContentsOfFile:@&myImage&]; // no caching那么该如何选择呢？
如果加载一张很大的图片，并且只使用一次，那么就不需要缓存这个图片。这种情况imageWithContentsOfFile比较合适----系统不会浪费内存来缓存图片。
然而，如果在程序中经常需要重用的图片，比如用于UITableView的图片，那么最好是选择imageNamed方法。这种方法可以节省出每次都从磁盘加载图片的时间。
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：402780次
积分：3868
积分：3868
排名：第6212名
原创：44篇
评论：108条
曾就职于拉手网、高德地图；专注于IOS应用开发，业余时间学习Java和Android。
个人博客：
新浪微博：
我的“IOS开发教程”微信公共账号：
欢迎大家关注！
(1)(2)(1)(4)(1)(3)(6)(2)(3)(6)(3)(1)(2)(9)(3)