最后使用Javascript加载一些图像

嗨，我只是想知道这是否可能。我在我的网站上有很多图片，我把它们制作成尽可能小的文件大小。其中一些图像用作幻灯片，但所有图像都是一次性加载的。是否有一种方法可以使用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>

任何想法都很好

---

谢谢

您可以使用jquery插件

您可以使用延迟加载脚本。一个很好的例子是（jquery）：

---

在window onload事件中，使用document.createElement创建图像，使用element.appendChild在需要的地方插入图像。

我认为您可以编写一个javascript，在页面加载后插入一些标记。以这种方式，幻灯片放映不会干扰主要内容的加载。

编辑-请参阅此答案的底部，我想到了一个更好的主意

原始答案 是的，完全可能。其他人已经注意到插件可以做到这一点，这很好，因为它们都经过了预先测试，但是如果你想自己做这件事，那就非常容易了。将

img

元素添加到DOM（文档对象模型）：

（我无法立即回忆起如何设置

alt

属性；它很可能是

img.alt=“…”；

）

当然，您需要添加一些错误检查。：-）因此，对于其中一幅图像，您希望将其添加到

pics

div，例如：

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

设置一个函数来添加图像，并在加载页面时调用它（可以使用

window.onload

或任何支持JavaScript库的函数，如果有的话，可以在稍早一点的时候进行操作）。例如，您的加载脚本可能如下所示（我通常不使用

window.onload

，但举个例子很方便）：

---

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

我认为这已经太晚了（10年后）

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

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;

<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"/>
...

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;