在Processingjs Canvas 元素中实现预加载器

发布于 2024-10-03 05:42:25 字数 127 浏览 8 评论 0原文

如何为processingjs画布元素实现预加载器？

两种情况 - 资产已加载，但 js 仍在计算/渲染视图；资产尚未

加载有人创建了processingjs 标签！代表数为 1500 的用户还不能这样做:(

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

深巷少女 2024-10-10 05:42:25

也许这个非常古老的片段可以帮助您，在加载所有图像后调用回调。文件夹参数用于加载低或高分辨率图片。

pics = {
  'Trans100'    : "trans100.png",
  'Trans101'    : "trans101.png",
  'TransPanel'  : "transPanel.png"
}

function oAttrs(o) { var a, out = ""; for (a in o){ out += a + " ";} return trim(out);}

function imageLoader(pics, folder, onready){
  this.nextPic  = 0;
  this.pics     = pics;
  this.folder   = folder;
  this.names    = oAttrs(pics).split(" ");
  this.onReady  = onready;
  this.loadNext();
}

  imageLoader.prototype.loadNext = function (){
    if (this.nextPic === this.names.length) {
      this.onReady();
    } else {
      this.loadImage(this.pics[this.names[this.nextPic]]);
    }
  };

  imageLoader.prototype.loadImage = function (file){
    this.nextPic += 1;
    var pic       = new Image();
    pic.onload    = this.loadNext.bind(this);
    pic.onerror   = function(){console.error("ERROR: " + file);};
    pic.src       = this.folder + file;
  };


// example: 

new imageLoader(pics, "images", function(){
  console.log("Images loaded");
})

May be this very old snippet helps you, after loading all images a callback is called. The folder param was used to load low or highres pics.

pics = {
  'Trans100'    : "trans100.png",
  'Trans101'    : "trans101.png",
  'TransPanel'  : "transPanel.png"
}

function oAttrs(o) { var a, out = ""; for (a in o){ out += a + " ";} return trim(out);}

function imageLoader(pics, folder, onready){
  this.nextPic  = 0;
  this.pics     = pics;
  this.folder   = folder;
  this.names    = oAttrs(pics).split(" ");
  this.onReady  = onready;
  this.loadNext();
}

  imageLoader.prototype.loadNext = function (){
    if (this.nextPic === this.names.length) {
      this.onReady();
    } else {
      this.loadImage(this.pics[this.names[this.nextPic]]);
    }
  };

  imageLoader.prototype.loadImage = function (file){
    this.nextPic += 1;
    var pic       = new Image();
    pic.onload    = this.loadNext.bind(this);
    pic.onerror   = function(){console.error("ERROR: " + file);};
    pic.src       = this.folder + file;
  };


// example: 

new imageLoader(pics, "images", function(){
  console.log("Images loaded");
})

回复收藏 0 原文

~没有更多了~