使用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. Android笔记：如何在Fragment里使用findViewById()方法？

    在Activity中,可以直接用findViewById(int id),通过xml的id来找到对应的View. 查找官方的api,具体如下: https://developer.android.go ...

  2. Request header is too large

    当request url过长的时候,经常tomcat后台就会包 "Request header is too large"错误. 解决方法:修改server.xml文件,linux ...

  3. XtraReport 添加空行的办法，很详细

    这两天为了做报表,研究了一下XtraReport .为了添加空行,想了很多办法.其中如果有分组时,网上给出的办法就会失败.现将经验公布一下,希望各位都能少走弯路. 1.加入自定义函数CreateCel ...

  4. chVsprintf

    #if LINUX_SYSTEM int chVsprintf(LPSTR buffer, int nCount, LPCSTR format, va_list argptr) { return vs ...

  5. Getting Started With Hazelcast 读书笔记(第八章-第十章)

    第八章到第十章就是一些介绍性的描述,吹的就是Hazelcast能使用在各种地方..   第八章 -从外面看 1.Hazelcast做了一个memcache的java实现,方便py和php使用. 2.可 ...

  6. 《笨办法学C》笔记之Makefile

    使用gcc编译C语言源码 在Linux系统中,C语言源码需要用gcc编译为二进制可执行文件,才能够运行. $ gcc test.c -o test 这句命令就将test.c文件编译为test二进制可执 ...

  7. 使用 VisualCode + iTerm2 提交github的Pull Request

    VisualCode集成github功能,是程序猿参与开源项目的利器.相比Sublime简单了很多(插件安装繁琐,比如你试试在Sublime2 安装gosublime,这里有坑; Sublime 3修 ...

  8. RHEL7关于时间的学习笔记

    当你发现时间是贼了,它早已偷光你的选择. 一,GMT.UTC.CST GMT:(Greenwich Mean Time)格林威治时间 ,太阳通过格林威治那一刻来作为计时标准. UTC:(Coordin ...

  9. [Gnu]Centos7 解决 gdb 提示 Missing separate debuginfos

    Centos7 上使用gdb: $ gdb php $ run /home/www/2.php 运行完 run,后面跟着很长的提示: …. Missing separate debuginfos, u ...

  10. java开发常用工具

    1.eclipse3.6 +浏览器插件+findbug+checkstyle+pmd+svn 2.plsql8.0对数据库的操作,存储过程的调试 3.Securecrt对linux服务器的操作 4.e ...