图片预加载, 效果非常明显, 特别是有多个图,

方法很简单 , 体验提升了不少

<div class="hidden">
        <script type="text/javascript">
                <!--//--><![CDATA[//><!--
                        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>

将该脚本应用到登录页面，只要用户输入登录帐号，大部分画廊图片将被预加载。

面所给出的方法似乎不够酷，那现在来看一个使用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://www.qdfuns.com/notes/36458/93b1e49cbfc3d30d568b414e242b5aa1.html

图片预加载 js css预加载的更多相关文章

  1. 动态加载js,css(项目中需要的)

    最近做的一个项目需要加入百度统计,大家都知道百度统计在页面引用就是一坨js,实现方法很简单引用到页面就ok了. 那么问题来了,虽然我不知道百度统计的原理是啥,我的测试服引用了百度统计,百度统计账号里面 ...

  2. 动态加载js css 插件

    简介 动态加载js,css在现在以及将来肯定是很重要的.目前来看前端代码编写的业务量已经远远超过后端编写的.随着对用户体验度逐渐增强,前端业务复杂,加载速度变得很慢很慢.为了解决这个问题,目前出现的两 ...

  3. js动态加载js css文件,可以配置文件后辍，防止浏览器缓存

    js的引用,在浏览器,或微信上访问经常会遇到文件改了,但就是没有更新的问题,使用此函数可以轻松解决缓存问题只需要把js的引用方式改为使用此函数加载即可 源码如下: /** * js动态加载js css ...

  4. 页面加载异常 清除浏览器静态文件 js css 缓存 js动态加载js css文件,可以配置文件后辍，防止浏览器缓存

    js清除浏览器缓存的几种方法 - 兔老霸夏 - 博客园 https://www.cnblogs.com/Mr-Rocker/p/6031096.html js清除浏览器缓存的几种方法   一.CSS和 ...

  5. javascript异步延时加载及判断是否已加载js/css文件

    <html> <head> <script type="text/javascript"> /**======================= ...

  6. [Yii2] 快速套模板，加载JS,CSS（HTML标签<base>）

    刚开始学,弄了好久,不知道怎么加载JS.CSS,以及怎么不加载YII2自带的模板!其实真的好简单! 补: 其实是我垃圾,YII2默认访问路径是WEB,所以把style文件放到web下就能加载! 首先把 ...

  7. 按需加载.js .css文件

    首先,理解按需加载当你需要用到某个js里面的函数什么鬼,或者某个css里的样式的时候你才开始加载这个文件. 然后是怎样实现的,简单来说就是在js中动态的createElem<script> ...

  8. Laravel 加载 js css image 文件

    写在前面的话: 1.前提是需要使用blade模板引擎 2.css js image 文件夹建在laravel 的 public 目录下面 3.生成的路径默认都是相对路径 A: 加载css文件 (用下面 ...

  9. JS/CSS/IMG加载顺序关系之DOMContentLoaded事件

    DOMContentLoaded介绍 DOMContentLoaded事件的触发条件是: 将会在“所有的DOM全部加载完毕并且JS加载执行后触发”. 但如果“js是通过动态加载进来的话,是不会影响到D ...

随机推荐

  1. YOLO(Darknet官方)训练分类器

    目录 1. 分类数据准备 2. Darknet配置 3. Darknet命令使用 4. cifar-10 使用示例 1. 分类数据准备 需要的文件列表: 1. train.list : 训练的图片的绝 ...

  2. HDU 4587 TWO NODES（割两个点的最大连通分支数）

    http://acm.hdu.edu.cn/showproblem.php?pid=4587 题意: 给一图,求割去两个点后所能形成的最大连通分支数. 思路: 对于这种情况,第一个只能枚举,然后在删除 ...

  3. C# Int转Enum

    Int-->Enum (1)可以强制转换将整型转换成枚举类型. 例如:Colors color = (Colors)2 ,那么color即为Colors.Blue (2)利用Enum的静态方法T ...

  4. 在采用vue-cli Post Get

    需要依赖插件 vue-resource npm install vue-resource --save https://cn.vuejs.org/v2/cookbook/using-axios-to- ...

  5. ros pbstream

    https://blog.csdn.net/xiekaikaibing/article/details/80320822

  6. re.sub

    1.re.sub主要功能实现正则的替换. re.sub定义: sub(pattern, repl, string, count=0, flags=0) 意思为:对字符串string按照正则表达式pat ...

  7. [ios]自定义UI

    参考:http://blog.sina.com.cn/s/blog_7b9d64af0101edqf.html 回忆一下,这么个场景. 我们在一个界面上,要排列多个相同的元素.你马上就可以想到: 1. ...

  8. Codeforces 101487E - Enter The Dragon

    101487E - Enter The Dragon 思路:做的时候两个地方理解错了,第一个事我以为龙吸了水,水就干了,其实龙是在下雨之前吸的,下雨时湖水又满了,所以湖水永远不会干:第二个是以为只要找 ...

  9. VS 2013 无法启动IIS Express Web 服务器

    之前程序好好的没什么问题,可是今天一大早来到公司后打开VS2013运行Web程序,然后就弹出提示信息:无法启动IIS Express Web 服务器,思来想去昨天都好好的,今天怎么会出现如此问题呢? ...

  10. Redis的介绍

    REmote DIctionary Server(Redis) 是一个由Salvatore Sanfilippo写的key-value存储系统. Redis是一个开源的使用ANSI C语言编写.遵守B ...