使用Javascript最后加载一些图像 [英] Use Javascript to load some images last

问题描述

我只是想知道这是否可行。我的网站上有很多图像，并且我将它们设置为尽可能小的文件大小。一些图像用作幻灯片放映，但一次性加载。有没有办法使用javascript使幻灯片图像最后加载，以便背景图像等首先加载，幻灯片加载结束。
图像位于页面主体中，并使用javascript幻灯片显示。
此图片的代码很简单：

Hi I just wondered if this is possible. I have quite a few images on my website and I have made them as small file size as possible. Some of the images are used as a slideshow but there are all loaded in one go. Is there a way using javascript to make the slideshow images load last so that the background images etc load up first and the slideshow loads at the end. The images are in the main body of the page and are "slideshowified" using javascript. The code for this images is simple:

<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>

任何想法都会很棒

谢谢

推荐答案

编辑 - 看到这个答案的底部，一个更好的想法来找我

Edit - See the bottom of this answer, a much better idea came to me

是的，完全可能。其他人已经注意到了这样做的插件，这些插件非常好，因为它们经过了预先测试等等，但是如果你想自己做这件事，那就太容易了。您将 img 元素添加到DOM（文档对象模型）：

Yes, totally possible. Others have noted plug-ins for doing this, which are great in that they come pre-tested and such, but if you want to do it yourself it's surprisingly easy. You add img elements to the DOM (document object model):

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 =...; ）

(I couldn't immediately recall how to set the alt attribute; it may well be img.alt = "...";)

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

Naturally you'll want to add some error checking to that. :-) So for one of your images, you want to add them to the pics div, so for example:

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

设置一个功能来添加你的图像并在加载页面时调用它（使用 window.onload 或者您的JavaScript库（如果有的话）提供的任何支持，比这更早。例如，你的加载脚本可能看起来像这样（我通常不使用 window.onload ，但它很方便一个例子）：

Set up a function to add your images and call it when the page is loaded (either using window.onload or whatever support your JavaScript library, if any, has for doing things a bit earlier than that). For instance, your load script might look like this (I don't typically use window.onload, but it's convenient for an example):

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

On window load, that will load the first image and then schedule the next one to be loaded 200ms (a fifth of a second) later. When that happens, it'll schedule the next, etc., etc., until it's loaded all of the images.

JavaScript库，如jQuery，Prototype，Closure等。通常有这种事情的各种辅助函数。

JavaScript libraries like jQuery, Prototype, Closure, etc. typically have various helper functions for this sort of thing.

以上情况很好，但是这意味着你必须完全改变你的页面布局方式，你必须将内容（图像源和大小）与JavaScript等混合在一起.Blech。

The above is fine, but it means that you have to completely change how you layout your pages, and you have to intermix content stuff (the image sources and sizes) with your JavaScript, etc. Blech.

如何做到这一点：使所有相同尺寸的图像标签都指向同一图像：

How 'bout this: Make all of your image tags that are the same size refer to the same image:

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

这些是占位符。然后，使用真实图像源向他们添加数据属性：

These would be placeholders. Then, add data attributes to them with the real image source:

<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开始有效（他们今天工作，他们只是不验证）。

Attributes in the form data-xyz will be valid as of HTML5 (and they work today, they just don't validate).

现在神奇：一旦主要负载是完成后，您将遍历DOM中的 img 标记，更新其 src 以使其 data-src 属性：

Now the magic: Once the main load is completed, you walk through the img tags in the DOM, updating their src to make their data-src attribute:

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;

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

Again, you'll want to add error handling and that's completely untested, but fundamentally it should work.

这篇关于使用Javascript最后加载一些图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！