如何为 javascript 幻灯片预加载图像答案

【问题标题】：how to preload images for javascript slideshow如何为 javascript 幻灯片预加载图像
【发布时间】：2020-06-10 23:06:39
【问题描述】：

我编写了一个简单的 JavaScript 幻灯片，其中背景通过 CSS 背景属性在一段时间后更改。问题是在带宽较低的设备上，幻灯片在未加载图像时会显示空白图像。我的解决方案是预加载所有图像并在加载所有图像时开始幻灯片放映。如何预加载图像并将其用作背景？

index.html:

<html>
  <head>
  </head>
  <body>
    <div class="jumbotron" style="width:200pt; height:200pt"></div>

    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
    <script src="slideshow.js"></script>
  </body>
</html>

slideshow.js：

$(window).on("load", function () {
  // List of image paths.
  var background_images = ["image1.jpg", "image2.jpg"]

  // Every X miliseconds change the background image.
  var X = 4000
  backgroundImageIdx = 0;
  window.setInterval(function () {
    $(".jumbotron").css("background-image", "url(" + background_images[backgroundImageIdx] + ")");
    backgroundImageIdx++;
    if (backgroundImageIdx >= nrOfBackgroundImages) {
      backgroundImageIdx = 0;
    }
  }, X);
}

【问题讨论】：

标签： javascript html jquery image preload

【解决方案1】：

要动态加载图像，您可以使用如下示例中的递归函数，该函数获取图像路径数组并加载它们，然后在页面加载后将它们添加到文档正文中。您可以根据自己的目的调整该函数，但关键是在开始时传递索引 0，然后在回调函数中对图像执行任何您需要的操作，该函数接收一个包含图像作为参数的新数组。

回调方法：

<script>
    let images = [
        'images/DSCF1589.jpg',
        'images/DSCF1590.jpg',
        'images/DSCF1591.jpg',
        'images/DSCF1592.jpg',
        'images/DSCF1593.jpg',
        'images/DSCF1594.jpg',
    ];

    // Loads the images one at a time, then calls the callback function when all images
    // have been loaded
    function loadImages(images, index, callback) {
        if (index < images.length) {
            let img = new Image();
            img.src = images[index];
            images[index] = img;
            images[index].onload = function() {
                loadImages(images, ++index, callback);
            };
        } else {
            callback(images);
        }
    }
    window.onload = function() {
        loadImages(images, 0, (images) => {
            // Your slideshow code goes here. This is just example code
            // of adding the images to your document once they are all loaded
            images.forEach((item) => {
               document.querySelector('body').appendChild(item);
            });
        });
    };
</script>

承诺方法：

<script>
    let images = [
        'images/DSCF1589.jpg',
        'images/DSCF1590.jpg',
        'images/DSCF1591.jpg',
        'images/DSCF1592.jpg',
        'images/DSCF1593.jpg',
        'images/DSCF1594.jpg',
    ];

    function loadImages(images) {
        return new Promise((resolve, reject) => {
            (function loadEach(images, index) {
                if (index < images.length) {
                    let img = new Image();
                    img.src = images[index];
                    images[index] = img;
                    images[index].onload = function() {
                        loadEach(images, ++index);
                    };
                    images[index].onerror = (err) => reject(err);
                } else {
                    resolve(images);
                }
            })(images, 0)
        });
    }
    window.onload = function() {
        loadImages(images).then((images) => {
            // Your slideshow code goes here. This is just example code
            // of adding the images to your document once they are all loaded
            images.forEach((item) => {
                document.querySelector('body').appendChild(item);
            });
        }).catch((err) => console.error(err));
    };
</script>

（注意：这些方法将数组中的图像url替换为图像本身。如果你想保留两者，你可以使用映射来存储url/图像对）

【讨论】：