后加载：检查图像是否在浏览器缓存中 [英] Post-loading : check if an image is in the browser cache

问题描述

简短版本问题：
是否有适用于所有浏览器的navigator.mozIsLocallyAvailable等效函数，或其他？

Short version question : Is there navigator.mozIsLocallyAvailable equivalent function that works on all browsers, or an alternative?

长版：）

这是我的情况：
我想为asp实现HtmlHelper扩展.net MVC可以轻松处理图像后加载（使用jQuery）。

Hi, Here is my situation : I want to implement an HtmlHelper extension for asp.net MVC that handle image post-loading easily (using jQuery).

所以我使用alt属性中指定的源渲染具有空图像源的页面。
我在window.onload事件之后插入图像源，效果很好。

So i render the page with empty image sources with the source specified in the "alt" attribute. I insert image sources after the "window.onload" event, and it works great.

我做了类似这样的事情：

I did something like this :

$(window).bind('load', function() {
    var plImages = $(".postLoad");
    plImages.each(function() {
        $(this).attr("src", $(this).attr("alt"));
    });
});

问题是：首次加载后，后加载的图片是缓存。但是如果页面加载需要10秒钟，那么缓存后加载的图像将在这10秒后显示。

The problem is : After the first loading, post-loaded images are cached. But if the page takes 10 seconds to load, the cached post-loaded images will be displayed after this 10 seconds.

所以我想在文档上指定图像源.ready事件，如果图像被缓存以立即显示它们。

So i think to specify image sources on the "document.ready" event if the image is cached to display them immediatly.

我找到了这个函数：navigator.mozIsLocallyAvailable可以检查图像是否在缓存中。以下是我用jquery做的事情：

I found this function : navigator.mozIsLocallyAvailable to check if an image is in the cache. Here is what I've done with jquery :

//specify cached image sources on dom ready
$(document).ready(function() {
    var plImages = $(".postLoad");
    plImages.each(function() {
        var source = $(this).attr("alt")
        var disponible = navigator.mozIsLocallyAvailable(source, true);
        if (disponible)
            $(this).attr("src", source);
    });
});

//specify uncached image sources after page loading
$(window).bind('load', function() {
        var plImages = $(".postLoad");
        plImages.each(function() {
        if ($(this).attr("src") == "")
            $(this).attr("src", $(this).attr("alt"));
    });
});

它适用于Mozilla的DOM，但它不适用于任何其他DOM。我试过navigator.isLocallyAvailable：结果相同。

It works on Mozilla's DOM but it doesn't works on any other one. I tried navigator.isLocallyAvailable : same result.

还有其他选择吗？

推荐答案

经过一番研究后，我发现了一个解决方案：

after some reseach, I found a solution :

想法是记录缓存的图像，在图像'load'事件上绑定日志功能。
我首先考虑将源存储在cookie中，但如果在没有cookie的情况下清除缓存则不可靠。此外，它还为HTTP请求添加了一个cookie ...

The idea is to log the cached images, binding a log function on the images 'load' event. I first thought to store sources in a cookie, but it's not reliable if the cache is cleared without the cookie. Moreover, it adds one more cookie to HTTP requests...

然后我遇到了魔法： window.localStorage （详情）

Then i met the magic : window.localStorage (details)

localStorage属性为域提供
持久性存储区域

The localStorage attribute provides persistent storage areas for domains

正是我想要的:)。这个属性在HTML5中标准化，它已经适用于几乎所有最近的浏览器（FF，Opera，Safari，IE8，Chrome）。

Exactly what i wanted :). This attribute is standardized in HTML5, and it's already works on nearly all recent browsers (FF, Opera, Safari, IE8, Chrome).

这是代码（没有处理window.localStorage不兼容的浏览器）：

Here is the code (without handling window.localStorage non-compatible browsers):

var storage = window.localStorage;
if (!storage.cachedElements) {
    storage.cachedElements = "";
}

function logCache(source) {
    if (storage.cachedElements.indexOf(source, 0) < 0) {
        if (storage.cachedElements != "") 
            storage.cachedElements += ";";
        storage.cachedElements += source;
    }
}

function cached(source) {
    return (storage.cachedElements.indexOf(source, 0) >= 0);
}

var plImages;

//On DOM Ready
$(document).ready(function() {
    plImages = $(".postLoad");

    //log cached images
    plImages.bind('load', function() {
        logCache($(this).attr("src"));
    });

    //display cached images
    plImages.each(function() {
        var source = $(this).attr("alt")
        if (cached(source))
            $(this).attr("src", source);
    });
});

//After page loading
$(window).bind('load', function() {
    //display uncached images
    plImages.each(function() {
        if ($(this).attr("src") == "")
            $(this).attr("src", $(this).attr("alt"));
    });
});

这篇关于后加载：检查图像是否在浏览器缓存中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！