Javascript P5.js在Safari上不工作，控制台中没有错误

我已经为我正在构建的一个站点制作了一个简单的p5.js草图，其中一些功能在safari/ios safari上不起作用，但是在chrome上一切都很好。控制台中没有错误

“showAbout”和“hideAbout”功能在safari上运行良好，但“mousePressed”功能与draw功能中的所有功能都不一样。想知道我的代码中是否有错误，或者这是否是safari的小故障

我将在下面粘贴我的代码

var dogs = [];
var index;
var x;
var y;
var angle;
var about;
var button;
var canvas;
var exit;
var toggle = false;
var w = window.innerWidth;
var h = window.innerHeight;

function preload() {
  for(let i=0; i<11; i++) {       
      dogs[i] = loadImage(`Images/Batch/dog${i}.jpg`);
  }
  about = select('.about-container');
  about.style('display', 'none');
  }

function setup() {
  canvas = createCanvas(w, h);
  frameRate(5); 
  angleMode(DEGREES);
  button = select('.about-button-text');
  button.mousePressed(showAbout);
  exit = select('.exit');
  exit.mousePressed(hideAbout); 
}

function draw() {
  fill(255);
  textSize(25);
  angle = random(-45,45);
  rotate(angle);
  index = random(dogs);
  index.width = w/3;
  x = random(w);
  y = random(h);
  image(index, x, y);
  
}

function mousePressed() {
  

  if (toggle) {
      noLoop();
      toggle = false;
      
  } else {
      loop();
      toggle = true;
  
  }
}

function showAbout() {
  about.show();
}

function hideAbout() {
  about.hide();
}


function windowResized() {
  resizeCanvas(w, h);
}

var-dogs=[]；
var指数；
var x；
变量y；
var角；
var关于；
var按钮；
var帆布；
var退出；
var-toggle=false；
var w=窗内宽度；
var h=窗内高度；
函数预加载（）{
例如（假设i=0；i如果没有可复制的示例，很难100%确定，但分配
p5.Image
对象的
width
属性会导致图像无法在Safari上显示（无错误，在Chrome上工作正常）。一般来说，您不应该为p5.js对象的字段赋值。我在文档中没有看到任何建议支持此操作的内容。相反，您可能希望在调用
image（）
函数时指定维度：

// I've also taken the liberty of making the variables used here local
// to this function instead of being declared globally.
function draw() {
  fill(255);
  textSize(25);
  let angle = random(-45,45);
  rotate(angle);
  let img = random(dogs);
  // ***** This is broken in Safari, and not supported in general:
  // img.width =  w / 3;
  let x = random(w);
  let y = random(h);
  
  let aspect = img.height / img.width;
  
  // image(img, x, y);
  // ***** Instead of changing the width property of the p5.Image object you
  // should be specifying the width and height parameters of the image()
  // function:
  image(img, x, y, w / 3, (w / 3) * aspect);
}

可运行示例：


const imageUrls=[
'https://cdn.glitch.com/0e291b8c-6059-4ca6-a0ae-84e67e1f94e7%2Forange-fish.jpg？v=1613865086898'，
'https://cdn.glitch.com/0e291b8c-6059-4ca6-a0ae-84e67e1f94e7%2Fblue-fish.jpg？v=1613865087591'，
'https://cdn.glitch.com/0e291b8c-6059-4ca6-a0ae-84e67e1f94e7%2Fgreen-fish.jpg？v=1613865088114'，
'https://cdn.glitch.com/0e291b8c-6059-4ca6-a0ae-84e67e1f94e7%2Fpurple-fish.jpg？v=1613865090105'，
'https://cdn.glitch.com/0e291b8c-6059-4ca6-a0ae-84e67e1f94e7%2Fwhite-fish.jpg？v=16138650939330'，
'https://cdn.glitch.com/0e291b8c-6059-4ca6-a0ae-84e67e1f94e7%2Fblack-fish.jpg？v=1613983100022'，
'https://cdn.glitch.com/0e291b8c-6059-4ca6-a0ae-84e67e1f94e7%2Fred-fish.png？v=1613983604942'
];
var=[]；
var关于；
var按钮；
var帆布；
var退出；
var-toggle=true；
var w=窗内宽度；
var h=窗内高度；
函数预加载（）{
对于（设i=0；i您的代码取决于现有的特定HTML元素。您还需要提供HTML代码以使其可复制。请参阅，嗨，Paul，谢谢您！它现在似乎正在Safari上工作。我发现的唯一问题是，图像开始在初始页面加载时出现需要一段时间-您知道c是什么吗是否会导致这一点，或者通过某种方式使它们立即出现在页面加载上？在我的代码片段中，我加载了
preload（）
函数中的所有图像。在此启动的任何加载操作都会延迟草图的初始化，直到所有这些资源加载完毕（您应该看到草图所在的文本“加载…”）。如果愿意，您可以在
setup（）
函数中加载图像，并在加载每个图像时将其添加到可用图像列表中（加载完成后，
loadImage（）
函数将使用第二个参数，这是一个回调函数）。谢谢你，Paul。这是一个简单的例子，只是将此代码移动到setup（）函数，包括for循环吗？您能否给出一个如何编写此代码的示例，因为我不太理解loadImage（）的回调函数的含义@LilyWeinbrand看一下我答案中的第二个隐藏代码段，它在setup（）函数中调用loadImage（），并使用回调将每个图像添加到“dogs”数组中。注意，我对回调使用了。