使用ajax预加载图片
使用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";
}, 1000);
};上面代码预加载了“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";
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);
};这里，我们通过DOM创建三个元素来实现三个文件的预加载。正如上面提到的那样，使用Ajax，加载文件不会应用到加载页面上。从这点上看，Ajax方法优越于JavaScript。
使用ajax预加载图片的更多相关文章
- CSS和JavaScript以及Ajax实现预加载图片的方法及优缺点分析
预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画 廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发 ...
- 用javascript预加载图片、css、js的方法研究
预加载的好处可以让网页更快的呈现给用户,缺点就是可能会增加无用的请求(但图片.css.js这些静态文件可以被缓存),如果用户访问的页面里面的css.js.图片被预加载了,用户打开页面的速度会快很多,提 ...
- 第一百五十七节，封装库--JavaScript，预加载图片
封装库--JavaScript,预加载图片 首先了解一个Image对象,为图片对象 Image对象 var temp_img = new Image(); //创建一个临时区域的图片对象alert ...
- js 预加载图片image（）函数
创建一个Image对象:var a=new Image(); 定义Image对象的src: a.src=”xxx.gif”; 这样做就相当于给浏览器缓存了一张图片. 图像对象: 建立图像对 ...
- 使用swiper 轮播插件ajax 请求加载图片时，无法滑动问题
因为图片是动态创建的,在插件开始初始化时,文档流中没用图片,故没有创建相应宽度.通过调整js加载顺序,问题还是没有解决. 最后找到swiper插件 api 有属性是可以根据内容变动,自动初始化插件的, ...
- html5预加载图片的写法
插件还是用 jquery.imgpreload.min.js 只不过初始化加载 必须用window.onload 图片dom都加载完成再显示 不然会有bug <pre> window.on ...
- img添加预加载图片
< img src="images/logo.png" onerror="javascript:this.src='images/logoError.png';&q ...
- 利用CSS、JavaScript及Ajax实现图片预加载的三大方法
预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...
- 图片预加载和AJAX的图片预加载
利用js实现图片预加载,加载所需要图片的路径与名称即可,很容易实现,该方法尤其适用预加载大量的图片: <div class="hidden"> <script t ...
随机推荐
- 使用id名称和name直接获取元素
我们知道一些第三方的js库对如何快速选取html中的元素做了一些简化,貌似十分高深莫测,其实也不然.而且js本身自带了对于特殊元素的简便选取的方法,下面就为大家简单介绍下. 在html中,一般最直接的 ...
- 图片缩放应用（nearest / bilinear / three-order interpolate）
typedef xPixel PIXELCOLORRGB; double Sinxx(double value){ if (value < 0) value = -value; if (valu ...
- IntelliJ Idea 集成svn 和使用
最近公司的很多同事开始使用svn,便尝试了一下,虽然快捷键与eclipse 有些不同,但是强大的搜索功能与"漂亮的界面"(个人认为没有eclipse好看 ),还是值得我们去使用的. ...
- FormatMessage与GetLastError配合使用，排查windows api调用过程中的错误
前一段时间在学习windows api调用过程中,遇到过一些调用错误或者程序没能显示预期的结果,或者直接出现vc运行时错误. 这对新手来说是司空见惯的事,因为不太熟悉难免会出错,出错的信息如果能显示很 ...
- object.bind()方法的低版本兼容
Function.prototype.bind= function(obj){ var _self = this, args = arguments; return function() { _sel ...
- c# long转 datetime
; DateTime start = , , , , , , DateTimeKind.Utc); DateTime date = start.AddMilliseconds(time).ToLoca ...
- 创建nim+安装vioc分区
一.搭建nim服务器 1.安装须知 安装nim软件包,client随系统默认安装,这里需要安装的是bos.sysmgt.nim.master和bos.sysmgt.nim.spot,即bos.sysm ...
- MFC - 微软基础类库和框架
一 MFC的概念和作用 1 什么是MFC?? 全称 Microsoft Foundation Class Library我们称之为微软基础类库 1)从硬盘的存在形式上来说 MFC就是一个库(静/动态库 ...
- 解决 Oracle exp导出表数据时空表不能导出的问题
一.不能导出空表的原因 1.Oracle11g默认对空表不分配segment,故使用exp导出Oracle11g数据库时,空表不会导出. 2.设置deferred_segment_creation 参 ...
- Selenium2+python 常用函数汇总
1. driver = webdriver.Chrome() --新建实例 2.driver.find_element_by_id("username") ---通过标签属性id ...