使用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 = "...";)

当然,你会想要添加一些错误检查.:-)因此,对于您的某个图像,您希望将它们添加到picsdiv中,例如:

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(五分之一秒).当发生这种情况时,它会安排下一个等等,直到它加载了所有图像.

像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开始,表单中的属性将是有效的(他们今天工作,他们只是不验证).

现在神奇了:一旦主要负载完成,你就可以浏览imgDOM中的标签,更新它们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;

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