使用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预加载图片的更多相关文章

  1. CSS和JavaScript以及Ajax实现预加载图片的方法及优缺点分析

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画 廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发 ...

  2. 用javascript预加载图片、css、js的方法研究

    预加载的好处可以让网页更快的呈现给用户,缺点就是可能会增加无用的请求(但图片.css.js这些静态文件可以被缓存),如果用户访问的页面里面的css.js.图片被预加载了,用户打开页面的速度会快很多,提 ...

  3. 第一百五十七节，封装库--JavaScript，预加载图片

    封装库--JavaScript,预加载图片 首先了解一个Image对象,为图片对象 Image对象 var temp_img = new Image();   //创建一个临时区域的图片对象alert ...

  4. js 预加载图片image（）函数

    创建一个Image对象:var a=new Image();    定义Image对象的src: a.src=”xxx.gif”;    这样做就相当于给浏览器缓存了一张图片. 图像对象: 建立图像对 ...

  5. 使用swiper 轮播插件ajax 请求加载图片时，无法滑动问题

    因为图片是动态创建的,在插件开始初始化时,文档流中没用图片,故没有创建相应宽度.通过调整js加载顺序,问题还是没有解决. 最后找到swiper插件 api 有属性是可以根据内容变动,自动初始化插件的, ...

  6. html5预加载图片的写法

    插件还是用 jquery.imgpreload.min.js 只不过初始化加载 必须用window.onload 图片dom都加载完成再显示 不然会有bug <pre> window.on ...

  7. img添加预加载图片

    < img src="images/logo.png" onerror="javascript:this.src='images/logoError.png';&q ...

  8. 利用CSS、JavaScript及Ajax实现图片预加载的三大方法

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...

  9. 图片预加载和AJAX的图片预加载

    利用js实现图片预加载,加载所需要图片的路径与名称即可,很容易实现,该方法尤其适用预加载大量的图片: <div class="hidden"> <script t ...

随机推荐

  1. 解决:NoSuchAlgorithmException: Algorithm HmacSHA1 not available

    windows下运行macInstance = Mac.getInstance("HmacSHA1");完全正常,Linux下则出现异常: java.security.NoSuch ...

  2. 解决跑twoBitToFa时出现“/admin/exe/linux.x86_64/twoBitToFa: Permission denied”的问题

    出现这种问题时,一般要加上以下命令: chmod ugo+x ./admin/exe/linux.x86_64/twoBitToFa 运行成功后,再将twobit格式转化为fa格式 ./admin/e ...

  3. div赋值,取值和input赋值，取值

    一.div取值 <div id="txtXiaofei" class="txt-panel">你好</div> 获取div的值$(&qu ...

  4. Object.create()方法的低版本兼容问题

    Object.prototype.create=(function(){ if(Object.prototype.create){return Object.prototype.create}else ...

  5. Java-计划存储

    Hive:Hive文档 Hdfs官方 Spark官方 About云中文论坛 书单:2015豆瓣书单 豆瓣千人8.0+书单 编程入口:Eclipse servlet java8 快捷键整理  MyBat ...

  6. 在c#中IO流读写操作

    1.使用FileStream读写文件 文件头: using System;using System.Collections.Generic;using System.Text;using System ...

  7. js分秒必争

    将函数和对象合写在一起时,函数就变成了“方法”(method): //当函数赋值给对象的属性,我们称之为 //方法.所有的JavaScript的对象都含有方法 var a=[];        //创 ...

  8. 迅雷VIP帐号获取小工具

    自己写的迅雷vip帐号获取工具,主要是熟悉一下正则表达式 下载地址: 迅雷VIP获取工具 另附vip防踢补丁,不能使用最新迅雷,我使用的是迅雷尊享版2.0.12.258,使用了一段时间,至少没被踢出来 ...

  9. Wind7系统下 wifi设置

    netsh wlan set hostednetwork  mode=allow ssid=pass:123456789 key=123456789 netsh wlan set hostednetw ...

  10. JS 关闭页面事件

    主页面调用:<script src="<%=ResolveUrl("../JS/QuitJS.js") %>" type="text ...