几种Preload javascript,CSS, image的方法

最新推荐文章于 2015-12-30 18:55:47 发布

baoeni

最新推荐文章于 2015-12-30 18:55:47 发布

阅读量1.9k

点赞数

分类专栏： Javascript CSS+HTML 文章标签： image css javascript iframe xmlhttprequest function

本文链接：https://blog.csdn.net/baoeni/article/details/7107583

版权

Javascript 同时被 2 个专栏收录

57 篇文章 0 订阅

订阅专栏

CSS+HTML

22 篇文章 0 订阅

订阅专栏

原文：http://www.phpied.com/preload-cssjavascript-without-execution/

preload javascript可以提升页面的速度，原因是preload之后网站的其他页面的许多资源都是已经加载过了，也就是说都在缓存里。

普通的页面也可以preload资源，但是对已第一次的加载就会很耗时。为了提高速度，可以使用以下的方法在不影响第一个网页加载时间的情况下预存资源

1. DOM

head append script tag

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 = "new.css";

        // a new JS
        var js = document.createElement("script");
        js.type = "text/javascript";
        js.src = "new.js";

        // preload JS and CSS
        head.appendChild(css);
        head.appendChild(js);

        // preload image
        new Image().src = "new.png";

    }, 1000);
};





2. Iframe

和第一种类似，但是script tag是放到iframe的document里面。


window.onload = function() {
    setTimeout(function(){

        // create new iframe
        var iframe = document.createElement('iframe');
        iframe.setAttribute("width", "0");
        iframe.setAttribute("height", "0");
        iframe.setAttribute("frameborder", "0");
        iframe.setAttribute("name", "preload");
        iframe.id = "preload";
        iframe.src = "about:blank";
        document.body.appendChild(iframe);

        // gymnastics to get reference to the iframe document
        iframe = document.all ? document.all.preload.contentWindow : window.frames.preload;
        var doc = iframe.document;
        doc.open(); doc.writeln("<html><body></body></html>"); doc.close(); 

        // create CSS
        var css = doc.createElement('link');
        css.type = "text/css";
        css.rel = "stylesheet";
        css.href = "new.css";

        // create JS
        var js = doc.createElement("script");
        js.type = "text/javascript";
        js.src = "new.js";

        // preload CSS and JS
        doc.body.appendChild(css);
        doc.body.appendChild(js);

        // preload IMG
        new Image().src = "new.png";

    }, 1000);
};







3. Iframe static page

直接把需要加载东西放到另一个页面中

window.onload = function() {
    setTimeout(function(){

        // create a new frame and point to the URL of the static
        // page that has all components to preload
        var iframe = document.createElement('iframe');
        iframe.setAttribute("width", "0");
        iframe.setAttribute("height", "0");
        iframe.setAttribute("frameborder", "0");
        iframe.src = "preloader.html";
        document.body.appendChild(iframe);

    }, 1000);
};





4.使用image或者object来下载资源：

window.onload = function () {

    var i = 0,
        max = 0,
        o = null,

        // list of stuff to preload
        preload = [
            'http://tools.w3clubs.com/pagr2/<?php echo $id; ?>.sleep.expires.png',
            'http://tools.w3clubs.com/pagr2/<?php echo $id; ?>.sleep.expires.js',
            'http://tools.w3clubs.com/pagr2/<?php echo $id; ?>.sleep.expires.css'
        ],
        isIE = navigator.appName.indexOf('Microsoft') === 0;

    for (i = 0, max = preload.length; i < max; i += 1) {

        if (isIE) {
            new Image().src = preload[i];
            continue;
        }
        o = document.createElement('object');
        o.data = preload[i];

        // IE stuff, otherwise 0x0 is OK
        //o.width = 1;
        //o.height = 1;
        //o.style.visibility = "hidden";
        //o.type = "text/plain"; // IE 
        o.width  = 0;
        o.height = 0;

        // only FF appends to the head
        // all others require body
        document.body.appendChild(o);
    }

};




5.使用错误的script的type属性

var s = document.createElement('script');
s.src = preload[1];
s.type = "text/cache";
document.getElementsByTagName('head')[0].appendChild(s);



6.AJAX
window.onload = function() {
    setTimeout(function(){

        // XHR to request a JS and a CSS
        var xhr = new XMLHttpRequest();
        xhr.open('GET', 'new.js');
        xhr.send('');
        xhr = new XMLHttpRequest();
        xhr.open('GET', 'new.css');
        xhr.send('');

        // preload image
        new Image().src = "new.png";

    }, 1000);
};





7.最后是只有在FF上才适用的方法：




for (i = 0, max = preload.length; i < max; i += 1) {
    var link = document.createElement('link');
    link.href = preload[i];
    link.rel = "prefetch";
    document.getElementsByTagName('head')[0].appendChild(link);
}

baoeni

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
几种Preload javascript,CSS, image的方法

原文：http://www.phpied.com/preload-cssjavascript-without-execution/preload javascript可以提升页面的速度，原因是preload之后网站的其他页面的许多资源都是已经加载过了，也就是说都在缓存里。普通的页面也可以preload资源，但是对已第一次的加载就会很耗时。为了提高速度，可以使用以下的方法在不影响第一个网页加
复制链接

扫一扫

专栏目录