最后使用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目录，例如：

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;

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

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

更新的答案

上面的内容很好，但这意味着你必须完全改变你的页面布局，你必须将内容内容(图像源和大小)混合到你的JavaScript中，等等。

这个怎么样:让你所有大小相同的图片标签指向同一张图片：

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

从HTML5开始，表单data-xyz中的属性将是有效的(它们现在仍然有效，只是不进行验证)。

现在神奇的是:一旦主加载完成，您将遍历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;

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

Answer 2

您可以使用jquery Lazy Load插件。

Answer 3

您可以使用延迟加载脚本。一个很好的例子是(jquery)：http://www.appelsiini.net/projects/lazyload