使用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 ...
随机推荐
- 用shell在一个文件后面的每一行追加数据
在shell分析log的时候,需要将数据过滤后转为csv的格式: 要在分析好的数据后面追加逗号: sed 's/$/&,/g' no2.log > ccc.log 结果保存在ccc.lo ...
- IOS TableView 去除点击后产生的灰色背景
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPa ...
- Web UI自动化测试中绕开验证码登陆方式浅谈
web自动化测试中让测试者感到困惑的是登陆验证码,每次都不一样.现在推荐一种绕开验证码登陆的方式,其实就是将web浏览器获取的登陆cookie加载到程序中就可以了,这样程序就会认为你已经登陆,就可以跳 ...
- 在VisualStudio2012环境下安装ArcEngine 10.0
因为ArcEngine10.0默认对应的开发工具为VS2010,在安装了VS2012的情况下安装ArcEngine10.0(注意:我自己的环境为VS2012和ArcEngine10.0,对于其他版本在 ...
- 简单的通用TreeView(WPF)
工作中要为很多类创建TreeView, 很多时候仅仅是因为要显示字段不同, 就得Ctrl+C.Ctrl+V复制一份几乎相同的代码, 这难免让人生厌, 于是希望像泛型集合的扩展方法那样, 可以在使用的时 ...
- 模拟器报Installation error: INSTALL_FAILED_CONTAINER_ERROR解决方法
今天刚刚导入了一个项目,但是多次导入,始终有错误,解决不了.第一次是我导入项目之后,项目前边有红色叉号,但是项目里面却没有错误标志.重新打开Eclipse,方解决了这个问题.但是,在模拟器上运行,却始 ...
- Zabbix（二）--第一台主机监控及触发器
0x01 Create Host 安装完zabbix后从哪里入手?无非就是要添加监控目标,那本文就从添加监控一个主机入手,了解zabbix的各个基本功能 添加主机在“Configuration”选项卡 ...
- JavaScript 之 for语句
示例: for(var i = 6; i--;){ console.log(i); } 这里的执行结果是5,4,3,2,1,0 W3C有关for的解释这里 for(语句1; 语句2;语句3){ con ...
- C语言实现 字符串过滤并修改并返回个数
基本问题:给定一个strContent,strWord,使用strWord 匹配strContent,匹配成功,将匹配部分全部替换为‘*’ ,并返回匹配成功个数.注意不能使用库函数. 例如:strCo ...
- SQL server 动态行转列
用聚合函数配合CASE语句实现行转列功能: 现在分享一下具体实现代码: 转换前效果: PlanName PlanType PlanLimit 计划1 计划类型1 RMB 1,000,000 计划1 计 ...