利用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(){ //XHRtorequestaJSandaCSS varxhr=newXMLHttpRequest(); xhr.open('GET','http://domain.tld/preload.js'); xhr.send(''); xhr=newXMLHttpRequest(); xhr.open('GET','http://domain.tld/preload.css'); xhr.send(''); //preloadimage newImage().src="http://domain.tld/preload.png"; },1000); };
就像这样,这段代码会预加载三个文件:preload.js,preload.css,preload.png。设置1秒的延时主要是防止加载JavaScript文件而导致正常页面的功能性问题。
为了将其封装起来,我们看看怎么使用原生JavaScript来写这一段代码:
window.onload=function(){ setTimeout(function(){ //referenceto<head> varhead=document.getElementsByTagName('head')[0]; //anewCSS varcss=document.createElement('link'); css.type='text/css'; css.rel='stylesheet'; css.href='http://domain.tld/preload.css'; //anewJS varjs=document.createElement('script'); js.type='text/javascript'; js.src='http://domain.tld/preload.js'; //preloadJSandCSS head.appendChild(css); head.appendChild(js); //preloadimage newImage().src='http://domain.tld/preload.png'; },1000); };
在这里,我们通过DOM创建了三个元素来预加载了页面上的三个文件。正如原文中所提到的,对于Ajax来说,这个方法不是那么好。预加载的文件内容不应该添加到正在加载的页面中。
以上所述是小编给大家介绍的利用CSS、JavaScript及Ajax实现图片预加载的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持!