时间戳

首页 > 解决方案 > 在 JavaScript 中预加载图像（完成时需要提醒）

javascript - 在 JavaScript 中预加载图像（完成时需要提醒）

问题描述

我有下面的代码，它在PreloadAllImages调用函数时成功地将图像预加载到浏览器缓存中。有谁知道如何发送简单的警报，例如“所有图像已预加载到浏览器缓存中”。加载最后一张图像（或所有图像）时。我有 300 张图片，因此setTimeOut由于延迟/下载延迟原因无法使用。我尝试过回调，在不同的地方放置警报命令等......但没有成功。

此代码基于此处的 JavaScript Only Method #1。https://perishablepress.com/3-ways-preload-images-css-javascript-ajax/

function PreLoadAllImages() {
  var images = new Array();
  function preload() {
    for (i = 0; i < preload.arguments.length; i++) {
      images[i] = new Image();
      images[i].src = preload.arguments[i];
    }
  }

  preload('Images/Image1.jpg', 'Images/Image2.jpg', ... , 'Images/Image300.jpg');
}

标签： javascript

解决方案

在一些帮助下，如果其他人需要它，这就是解决问题的方法。将图像加载到 html 页面上的不可见 div 中，然后运行脚本以确保所有内容都已加载。一个按钮调用 PreLoadAllImages()，然后调用 CheckImages()。

var imagefiles = [
"Images/Image1.jpg",
"Images/Image2.jpg",
.....
"Images/Image300.jpg"];

function PreLoadAllImages () {
    imagefiles.forEach(function(image){
        var img = document.createElement('img');
        img.src = image;
        document.body.appendChild(img);});
    $('img').hide();
} 

var all_loaded;

function CheckImages() {
    $('img').each(function(){ // selecting all image element on the page
    var img = new Image($(this)); // creating image element
    img.src = $(this).attr('src'); // pass src to image object
    if(img.complete==false) {
        all_loaded=false;
        return false;
    }
    all_loaded=true;
    return true;});
}

function CheckLoadingImages() {
    var result;
    var Checking=setInterval(function(){
         result=CheckImages();
         if(all_loaded==true) {
             clearInterval(Checking);
             MsgAfterLoading();
            }
         }, 2000);
}

function MsgAfterLoading() {
    alert('All Images Loaded');
}

推荐阅读