6

在以下位置找到了使用 ajax 预加载内容的技术：http: //perishablepress.com/3-ways-preload-images-css-javascript-ajax/

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);
};

我注意到此图像的“ajax”预加载根本不是真正的 ajax。它与我多年来一直使用的相同，只是将 url 设置在新图像对象的源中并让浏览器将其加载到缓存中。

现在想象有一个应用程序，如果它占用了一定的时间，我需要实际取消图像的预加载。仅将图像设置为 src 确实没有什么好的方法，这与停止加载实际 xhr 请求的 xhr.abort() 方法不同。

有什么理由做类似下面的事情不会预加载图像并允许取消预加载请求？

function preload(url, timeout){
    this.canceltimeout = function(){
        clearTimeout(this.timeout);
        this.loaded = true;
        return false;
    }

    this.abort = function(){
        this.xhr.abort();
        this.aborted = true;
    }

    //creates a closure to bind the functions to the right execution scope
    this.$_bind = function(method){
        var obj = this;
        return function (e){ obj[method](e);};
    }

    //set a default of 10 second timeout
    if(timeout == null){
        timeout = 10000;
    }

    this.aborted = false;
    this.loaded = false;
    this.xhr = new XMLHttpRequest();
    this.xhr.onreadystatechange = this.$_bind('canceltimeout');
    this.xhr.open('GET', url);
    this.xhr.send('');
    this.timeout = setTimeout(this.$_bind('abort'), timeout);
}

var llama = new preload('/image.gif');
show_image();

function show_image(){
    if(llama.loaded){
        var l = new Image();
        l.src = '/image.gif';
        application.appendChild(l);
    }else if(llama.aborted){
        var l = document.createElement('p');
        l.innerHTML = 'image.gif got cancelled';
        application.appendChild(l);
    }else{
        setTimeout(show_image, 10);
    }
    return false;
}
4

1 回答 1

6

主要缺点是除非您已将网络服务器配置为提供未来的新鲜度信息（未来的一个Expires或Cache-control: max-agehttp 标头），否则当您设置 image.src 时，网络浏览器可能会向服务器发出第二个 http 请求，或者只是简单地实际使用文档中的图像。如果您的 Web 服务器发送了新鲜度验证标头（last-modified或e-tag），则不会重新下载图像，但仍会发出请求服务器进行新鲜度验证的请求，这很浪费并增加了过程的延迟。

我不知道为什么，但是当你持有一个 Image() 对象的引用时，浏览器真的很喜欢缓存图像。

如果您在 Web 浏览器调试工具中观看网络面板，您会发现大多数浏览器会发出前 2 个请求，但不会发出第 3 个请求。注释掉 ajax 回调中的代码，您将看到针对 #3 的请求

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script>
var f = "0.png?" + (new Date); // 0.png should not have future freshness info headers

$.get(f, function() {
    var i = new Image();
    i.src = f;
});
setTimeout(function(){
    //#3
    var i = new Image();
    i.src = f;
}, 5000);
</script>
于 2012-06-01T05:22:38.853 回答