javascript - 最后使用 Javascript 加载一些图像

Question

您好，我只是想知道这是否可能。我的网站上有很多图片，我将它们的文件大小尽可能小。一些图像用作幻灯片，但所有图像都是一次性加载的。有没有办法使用 javascript 让幻灯片图像最后加载，以便背景图像等首先加载，最后加载幻灯片。图像位于页面的主体中，并使用 javascript 进行“幻灯片演示”。此图像的代码很简单:

<div id="pics">
        <img src="images/cs9.png" width="270px" height="270px" alt="teaching"/>
            <img src="images/cs1.png" width="200px" height="200px" alt="teaching"/>
            <img src="images/cs3.png" width="200" height="200px" alt="teaching"/>

            <img src="images/cs5.png" width="200" height="200px" alt="teaching"/>
            <img src="images/cs6.png" width="200" height="200px" alt="teaching"/>
            <img src="images/cs7.png" width="200" height="200px" alt="teaching"/>
            <img src="images/cs4.png" width="200" height="200px" alt="teaching"/>
           <img src="images/cs12.png" width="200" height="200px" alt="teaching"/>
           <img src="images/cs8.png" width="200" height="200px" alt="teaching"/>
            <img src="images/cs10.png" width="200" height="200px" alt="teaching"/>
            <img src="images/cs14.png" width="200" height="200px" alt="teaching"/>


        </div>

任何想法都会很棒

谢谢

Answer 1

编辑 - 看到这个答案的底部，我想到了一个更好的主意

原始答案

是的，完全有可能。其他人已经注意到执行此操作的插件，这些插件很棒，因为它们已经过预先测试等等，但是如果您想自己做，那会出奇地容易。您将 img 元素添加到 DOM(文档对象模型):

function addAnImage(targetId, src, width, height) {
    var img;

    img = document.createElement('img');
    img.src = src;
    img.style.width  = width  + "px";
    img.style.height = height + "px";
    target = document.getElementById(targetId);
    target.appendChild(img);
}

(我无法立即记忆起如何设置 alt 属性；它很可能是 img.alt = "...";)

当然，您会希望为此添加一些错误检查。 :-) 所以对于你的一张图片，你想将它们添加到 pics div，例如:

addAnImage('pics', 'images/cs12.png', 200, 200);

设置一个函数来添加你的图像并在页面加载时调用它(使用 window.onload 或者任何支持你的 JavaScript 库的东西，如果有的话，比那)。例如，您的加载脚本可能如下所示(我通常不使用 window.onload，但举个例子很方便):

function pageLoad() {
    var images = [
        {src: "images/cs9.png", width: 270, height: 270, alt: "teaching"},
        {src: "images/cs1.png", width: 200, height: 200, alt: "teaching"},
        {src: "images/cs3.png", width: 200, height: 200, alt: "teaching"},
        // ..., make sure the last one *doesn't* have a comma at the end
    ];
    var index;

    // Kick start the load process
    index = 0;
    nextImageHandler();

    // Load an image and schedule the next
    function nextImageHandler() {
        var imgdata;

        imgdata = images[index];
        addOneImage('pics', imgdata.src, imgdata.width, imgdata.height);
        ++index;
        if (index < images.length) {
            window.setTimeout(nextImagePlease, 200);
        }
    }
}
window.onload = pageLoad;

在窗口加载时，这将加载第一个图像，然后安排下一个图像在 200 毫秒(五分之一秒)后加载。当发生这种情况时，它会安排下一个，等等，直到它加载了所有图像。

像 jQuery、Prototype、Closure 等 JavaScript 库通常有各种帮助函数来处理这类事情。

更新的答案

上面的内容很好，但这意味着您必须完全改变页面的布局方式，并且必须将内容(图像源和大小)与 JavaScript 等混合在一起。Blech。

这个怎么样:让所有相同大小的图像标签都引用相同的图像:

<div id="pics">
    <img src="images/w270h270.png" width="270" height="270" alt="teaching"/>
    <img src="images/w200h200.png" width="200" height="200" alt="teaching"/>
    <img src="images/w200h200.png" width="200" height="200" alt="teaching"/>
...

这些将是占位符。然后，用真实的图像源给它们添加数据属性:

<div id="pics">
    <img src="images/w270h270.png" data-src="cs9.png" width="270" height="270" alt="teaching"/>
    <img src="images/w200h200.png" data-src="cs1.png" width="200" height="200" alt="teaching"/>
    <img src="images/w200h200.png" data-src="cs3.png" width="200" height="200" alt="teaching"/>
...

data-xyz 形式的属性将在 HTML5 中有效(它们在今天有效，只是不验证)。

现在神奇的是:主要加载完成后，您遍历 DOM 中的 img 标记，更新它们的 src 以使其成为 data-src 属性:

function pageLoad() {
    var nodeList, index;

    // Get a NodeList of all of the images on the page; will include
    // both the images we want to update and those we don't
    nodeList = document.body.getElementsByTagName('img');

    // Kick-start the process
    index = 0;
    backgroundLoader();

    // Our background loader
    function backgroundLoader() {
        var img, src;

        // Note we check at the beginning of the function rather than
        // the end when we're scheduling. That's because NodeLists are
        // *live*, so they can change between invocations of our function.
        // So avoid going past what is _now_ the end of the list.
        // And yes, this means that if you remove images from
        // the middle of the document while the load process is running,
        // we may end up missing some. Don't do that, or account for it.
        if (index >= nodeList.length) {
            // we're done
            return;
        }

        // Get this image
        img = nodeList[index];

        // Process it
        src = img.getAttribute("data-src");
        if (src) {
            // It's one of our special ones
            img.src = src;
            img.removeAttribute("data-src");
        }

        // Schedule the next one
        ++index;
        window.setTimeout(backgroundLoader, 200);
    }
}
window.onload = pageLoad;

同样，您需要添加错误处理，这完全未经测试，但从根本上说它应该可以工作。