使用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. 比较两个NSDate类型的参数相差的时间差

    +(NSInteger)getDaysFrom:(NSDate *)serverDate To:(NSDate *)endDate { NSCalendar *gregorian = [[NSCale ...

  2. Java基础知识系列——String

    最近晚上没有什么事(主要是不加班有单身),就复习了一下Java的基础知识.我复习Java基础知识主要是依据Java API和The Java™ Tutorials. 今天是第一篇,复习了一下Strin ...

  3. notepad++的CoolFormat代码格式化插件使用

    因为notepad++的NppAStyle插件只支持格式化C.C++.C#.Java这四种编程语言的代码,所以本人推荐使用这个CoolFormat的插件,相比于NPPAStyle,CoolFormat ...

  4. Redis的5种数据结构

    Redis可以存储可以存储键与5种不同数据结构类型之间的映射. 五种结构类型为:STRING(字符串).LIST(列表).SET(集合).HASH(散列).ZSET(有序集合). 1.字符串类型Str ...

  5. ww

    #!bin/python #coding=utf-8 """ Create by he """ import sys import re i ...

  6. Hibernate多对一（注解）

    package cqvie.yjq.Util; import java.util.List; import org.hibernate.Query; import org.hibernate.Sess ...

  7. JS之模块模式应用

    之前做过一些简单的单页面应用项目,是对模块模式很好的应用,我决定动手做一个简单的Demo出来. 基本思想是设计一个加载器,当用户点击菜单时,获取不同选项的按钮id,根据不同id实现对页面内容的替换. ...

  8. dockManager中DockPanel的刷新问题！

    使用的是DevExpress的dockManager控件,新增一个DockPanel,在DockPanel中添加一个AxMapControl控件并设置默认加载地图. 实现效果图如下: 但是存在一个问题 ...

  9. 【如何快速的开发一个完整的iOS直播app】(美颜篇)

    原文转自:袁峥Seemygo    感谢分享.自我学习 前言 在看这篇之前,如果您还不了解直播原理,请查看这篇文章如何快速的开发一个完整的iOS直播app(原理篇) 开发一款直播app,美颜功能是很重 ...

  10. 调整Win7中TCP/IP半开连接数限制

    调整Win7中TCP/IP半开连接数限制      相信大家都有过这样的经历,普通的ADSL宽带下,打开下载工具下载资源时,再想浏览网页就会变得非常困难了,Windows7中也未能幸免.   究其原因 ...