利用js实现图片预加载，加载所需要图片的路径与名称即可，很容易实现，该方法尤其适用预加载大量的图片：

<div class="hidden">

    <script type="text/javascript">

            var images = new Array()

            function preload() {

                for (i = 0; i < preload.arguments.length; i++) {

                    images[i] = new Image()

                    images[i].src = preload.arguments[i]

                }

            }

            preload(

                "http://domain.tld/gallery/image-001.jpg",

                "http://domain.tld/gallery/image-002.jpg",

                "http://domain.tld/gallery/image-003.jpg"

            )

    </script>

</div>

　　可以预加载任意数量的图片。将下面的脚本添加入任何Web页中，根据程序指令进行编辑即可。

<div class="hidden">

    <script type="text/javascript">

            if (document.images) {

                img1 = new Image();

                img2 = new Image();

                img3 = new Image();

                img1.src = "http://domain.tld/path/to/image-001.gif";

                img2.src = "http://domain.tld/path/to/image-002.gif";

                img3.src = "http://domain.tld/path/to/image-003.gif";

            }

    </script>

</div>

　　正如所看见，每加载一个图片都需要创建一个变量，如“img1 = new Image();”，及图片源地址声明，如“img3.src = “../path/to/image-003.gif”;”。参考该模式，你可根据需要加载任意多的图片。

对该方法进行了改进。将该脚本封装入一个函数中，并使用 addLoadEvent（），延迟预加载时间，直到页面加载完毕。

function preloader() {

    if (document.images) {

        var img1 = new Image();

        var img2 = new Image();

        var img3 = new Image();

        img1.src = "http://domain.tld/path/to/image-001.gif";

        img2.src = "http://domain.tld/path/to/image-002.gif";

        img3.src = "http://domain.tld/path/to/image-003.gif";

    }

}

function addLoadEvent(func) {

    var oldonload = window.onload;

    if (typeof window.onload != 'function') {

        window.onload = func;

    } else {

        window.onload = function() {

            if (oldonload) {

                oldonload();

            }

            func();

        }

    }

}

addLoadEvent(preloader);

　　上面所给出的方法似乎不够酷，那现在来看一个使用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。

原文: http://i.jakeyu.top/2016/11/28/图片预加载/　　作者: Jake

还可以进入个人博客：www.jishubar.cn

图片预加载和AJAX的图片预加载的更多相关文章

  1. 向上滚动或者向下滚动分页异步加载数据(Ajax + lazyload)[上拉加载组件]

    /**** desc : 分页异步获取列表数据,页面向上滚动时候加载前面页码,向下滚动时加载后面页码 ajaxdata_url ajax异步的URL 如data.php page_val_name a ...

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

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

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

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

  4. 利用CSS、JavaScript及Ajax实现图片预加载的三大方法及优缺点分析

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

  5. 转载：用Jquery实现的图片预加载技术，可以实现有序加载和无序加载！

    一.背景 我们在做页面的时候,从用户体验的角度出发,肯定是希望用户以最快的速度看到完整的页面信息,但在实际情况中经常会遇到些问题. 比如受网速影响,页面加载素材的时间比较长,页面会出现短时间的错乱或者 ...

  6. ajax读取图片后排列问题（先加载完图片再排列）

    网上找了个瀑布流的图片排列插件.从数据库读取图片路径后显示时出现了位置重叠问题. $.ajax({ type: "POST", url: "index.aspx" ...

  7. js原生图片懒加载 或 js原生图片预加载，html标签自定义属性

    使用原声js来实现图片预加载,或图片懒加载,小伙伴们可以根据项目需要来结合vue或者是react来进行修改. 一.什么是图片懒加载或什么是图片预加载 当访问一个页面的时候,先把img元素或是其他元素的 ...

  8. 图片懒加载、ajax异步调用数据、lazyload插件的使用

    关于这个效果还是很简单的,样式部分我就不多说了,我就简单的写了一下布局, 这是css样式 我们先说一下实现的原理. 我们都知道在于图片的引入,我们都是用src来引入图片地址.从而实现图片的显示.那我们 ...

  9. html5 ajax多图片可预览上传图片

    最近不是特别忙,我就利用html5写了个上传图片(或其他文件)的页面,主要利用是html5的file api,此页面比较简陋,没做样式的优化,包含上传图片预览,多图片上传,上传进度条(利用html5的 ...

随机推荐

  1. Android代码故事第一回，平均间隔的按钮

    我们的APP新做了一个放操作按钮的界面,老板要求简洁美观有内涵,按钮要均匀分布,于是参考之前的实现,设计MM给了一张图,像这样: |================================== ...

  2. thinkphp nginx php-fpm url rewrite 导致 404 错误

    ## thinkphp nginx php-fpm url rewrite 导致 404 错误 之前thinkphp的系统部署在apache上,考虑到在并发性能nginx比apache强悍得多,所以在 ...

  3. SQL SELECT 语句

      本章讲解 SELECT 和 SELECT * 语句. SQL SELECT 语句 SELECT 语句用于从表中选取数据. 结果被存储在一个结果表中(称为结果集). SQL SELECT 语法 SE ...

  4. information_schema.TABLES

    获取所有表结构(TABLES) SELECT * FROM information_schema.TABLES WHERE TABLE_SCHEMA='数据库名'; TABLES表:提供了关于数据库中 ...

  5. 【SVN】Error running context: 由于目标计算机积极拒绝,无法连接

    SVN服务没开启,步骤如下: 1.打开[控制面板]→[管理工具]→[服务]: 2.找到[visual SVN Sever],右击选择[启动]: 3.服务开启后,导入数据就成功了!

  6. angularjs（一）基础概念

    一.前言 前端技术的发展是如此之快,各种优秀技术.优秀框架的出现简直让人目不暇接,作为一名业界新秀,紧跟时代潮流,学习掌握新知识自然是不敢怠慢.当听到AngularJs这个名字并知道是google在维 ...

  7. CocoaPod安装和使用教程

    一.CocoaPods是什么? CocoaPods是一个负责管理iOS项目中第三方开源库的工具.CocoaPods的项目源码在Github上管理.我们开发iOS项目不可避免地要使用第三方开源库,Coc ...

  8. uvm - driver

    `ifndef MY_DRIVER__SV `define MY_DRIVER__SV class my_driver extends uvm_driver; function new(string ...

  9. Newtonsoft.Json高级用法(转)

    手机端应用讲究速度快,体验好.刚好手头上的一个项目服务端接口有性能问题,需要进行优化.在接口多次修改中,实体添加了很多字段用于中间计算或者存储,然后最终用Newtonsoft.Json进行序列化返回数 ...

  10. iOS中的CocoaPods用法及常用命令

     CocoaPods是什么? ***CocoaPods的使用场景:*** 1. 当你开发iOS应用时,会经常使用到很多第三方开源类库,比如JSONKit,AFNetWorking等等.可能某个类库又用 ...