Question

我有一个页面，它将使用ajax加载大量的HTML。所有这些片段都将具有图像，其中一些将使用背景图像在单独的CSS中指定。我想编写一个预加载器，以便只有在所有加载完成后才会显示加载的块。如果所有图像都在HTML块中，我会加载它，将它放在一个隐藏元素中，然后查找所有img标记并控制它们是否被加载（或在load方法中放入一些回调）。问题是CSS我不能那么容易地做到这一点......所以我想到的唯一方法就是拥有一个单独的xml文件，其中包含所有图像位置，并使用它来创建IMG元素，加载它们以及何时加载它们加载显示块（因此图像已从服务器中拉出）。你知道更好的方法吗？有没有现成的组件？

Answer 1

如果您接受一条建议，请不要这样做。这里的优先级是内容，图像是次要的。由于图像，不要让用户等待内容。这将是一个痛苦的屁股，特别是在缓慢的连接。

最好使用一些占位符/指示符图像来提供有关加载组件的反馈，也许可以对<img>标记中的图像使用一些很好的淡入效果。

注意：对于小图片，您可以尝试Data: URIs，这样您就可以将图片嵌入到HTML或CSS文件中。

已更新

永远不要说不。 :)这是你可以使用的原型。它在FF 3+和IE 5.5+中适用于我，但由于某种原因，Chrome将cssRules显示为null。我必须弄明白为什么。另一个TODO是在IE中合并@import - ed规则，因为它不符合标准规则集。

无论如何，你可以看到你需要传递一个document，一个callback并且有一个可选的 timeout参数（默认为10秒）。

在文档中加载每个图像后，将执行callback。（注意如果它失败了404脚本将负责它）。在这里你可以做你的fadeIn或show或somethin'。

timeout有一个后备，如果出现任何问题，它会在一段时间后调用回调。

// this function will execute a callback after all
// images has been loaded in a document
function imageLoader(document, callback, timeout) {

    timeout = timeout || 10000; // 10s default
    var i, j, remaining = 0;    // number of loading images
    // hash table to ensure uniqueness
    // url => image object
    var imgs = {};

    function handler(el, event) {
        remaining -= 1;
        if (remaining == 0 && !callback.done
         && typeof callback === "function") {
            callback.done = true;
            callback();
        }
    }

    // adds the image to the hash table
    function addImage(src, img) {
        if (!imgs[src]) {
          remaining++;
          img = img || new Image();
          img.onload  = handler;
          img.onerror = handler;
          img.src = img.src || src;
          // add to the hash table
          imgs[src] = img;
        }
    }

    // now gather all those images
    var sheets = document.styleSheets;
    for (i=0; i<sheets.length; i++) {

        // HTML <img> tags
        var els = document.getElementsByTagName("IMG");
        for (i=0; i<els.length; i++) {
            var el = els[i].src;
            addImage(el.src, el);
        }

        // CSS background images
        var css = sheets[i];
        var pos = css.href.lastIndexOf("/");
        var cssDir = (pos != -1) ? css.href.substring(0, pos + 1) : "";
        var rules  = css.cssRules || css.rules;

        for (j=0; j<rules.length; j++) {
            var style = rules[j].style;
            var img = style.backgroundImage;
            if (img == "none") img = "";
            var filename = img.substring(4, img.length - 1).replace(/['"]/g,"");
            if (filename) {
                if (filename.indexOf("http://") != 0
                 && filename.indexOf("/") != 0) {
                    filename = cssDir + filename;
                }
                addImage(filename);
            }
        }
    }

    // correct the start time
    var start = +new Date();

    var timer = setInterval(function(){
        var elapsed = +new Date() - start;
        // if timout reached and callback
        // hasn't been not called yet
        if (elapsed > timeout && !callback.done) {
            callback();
            callback.done = true;
            clearInterval(timer);
        }
    }, 50);
}

自动HTML预加载器

1 个答案:

已更新