有没有办法在 javascript 中翻译这个 p5.js 草图？

Question

我正在开发我的投资组合网站 (www.beatricebazzan.com)。 结果真的很慢，我检测到它取决于 p5.js 文件。 如果我隐藏它，该网站在每台设备上都能完美运行。 如果有办法将这个草图翻译成一个简单的 js 文件，我很想知道，这可能不那么重。

这是我的草图：

var provaHover;
var mouseIsOvering = false;
let img;

var p2Hover;
var mouseIsOvering2 = false;
let img2;

var p3Hover;
var mouseIsOvering3 = false;
let img3;

var p4Hover;
var mouseIsOvering4 = false;
let img4;

var p5Hover;
var mouseIsOvering5 = false;
let img5;

var p6Hover;
var mouseIsOvering6 = false;
let img6;

var p7Hover;
var mouseIsOvering7 = false;
let img7;

var p8Hover;
var mouseIsOvering8 = false;
let img8;

var p9Hover;
var mouseIsOvering9 = false;
let img9;

var p10Hover;
var mouseIsOvering10 = false;
let img10;

var p11Hover;
var mouseIsOvering11 = false;
let img11;

var p12Hover;
var mouseIsOvering12 = false;
let img12;

var p13Hover;
var mouseIsOvering13 = false;
let img13;

function preload() {}

function setup() {
  // let canvas = createCanvas(windowWidth, windowHeight);
  let canvas = createCanvas(windowWidth, 1600);
  canvas.position(0, 0);
  // img = loadImage("https://i.imgur.com/NiZiYUz.gif");
  img = loadImage("https://raw.githubusercontent.com/BazziBeatrice/portfolio/master/assets/intro/spleen-intro.gif");
  provaHover = select("#p01")

  img2 = loadImage("https://raw.githubusercontent.com/BazziBeatrice/Portfolio/master/assets/intro/thelostgallery-intro.jpg");
  p2Hover = select("#p02")

  img3 = loadImage("https://raw.githubusercontent.com/BazziBeatrice/Portfolio/master/assets/intro/physicalinternet-intro.jpg");
  p3Hover = select("#p03")

  img4 = loadImage("https://raw.githubusercontent.com/BazziBeatrice/Portfolio/master/assets/intro/placemaking-intro.jpg");
  p4Hover = select("#p04")

  img5 = loadImage("https://raw.githubusercontent.com/BazziBeatrice/portfolio/master/assets/intro/setjettersunited-intro.jpg");
  p5Hover = select("#p05")

  // img6 = loadImage("https://raw.githubusercontent.com/BazziBeatrice/Portfolio/master/assets/intro/contratempo-intro.gif");
  img6 = loadImage("https://raw.githubusercontent.com/BazziBeatrice/portfolio/master/assets/intro/contratempo-intro.png");
  p6Hover = select("#p06")

  img7 = loadImage("https://raw.githubusercontent.com/BazziBeatrice/Portfolio/master/assets/intro/outforia_intro.gif");
  p7Hover = select("#p07")

  // img8 = loadImage("https://i.imgur.com/uv8wnM7.gif");
  img8 = loadImage("https://raw.githubusercontent.com/BazziBeatrice/portfolio/master/assets/images/fuso-tv.gif");
  p8Hover = select("#p08")

  img9 = loadImage("https://raw.githubusercontent.com/BazziBeatrice/Portfolio/master/assets/intro/ihavegotnothingtowear-intro.png");
  p9Hover = select("#p09")

  img10 = loadImage("https://raw.githubusercontent.com/BazziBeatrice/Portfolio/master/assets/intro/atavola-intro.jpg");
  p10Hover = select("#p10")

  img11 = loadImage("https://raw.githubusercontent.com/BazziBeatrice/Portfolio/master/assets/intro/lineunit-intro.jpg");
  p11Hover = select("#p11")

  img12 = loadImage("https://raw.githubusercontent.com/BazziBeatrice/Portfolio/master/assets/intro/thekingof-intro.gif");
  p12Hover = select("#p12")

  img13 = loadImage("https://raw.githubusercontent.com/BazziBeatrice/Portfolio/master/assets/intro/video-macchie-intro.gif");
  p13Hover = select("#p13")

}

function draw() {

  if (mouseIsOvering == true) {mostraImmagine();} else if (mouseIsOvering2 == true) {mostraImmagine2();
  } else if (mouseIsOvering3 == true) {mostraImmagine3();
  } else if (mouseIsOvering4 == true) {mostraImmagine4();
  } else if (mouseIsOvering5 == true) {mostraImmagine5();
  } else if (mouseIsOvering6 == true) {mostraImmagine6();
  } else if (mouseIsOvering7 == true) {mostraImmagine7();
  } else if (mouseIsOvering8 == true) {mostraImmagine8();
  } else if (mouseIsOvering9 == true) {mostraImmagine9();
  } else if (mouseIsOvering10 == true) {mostraImmagine10();
  } else if (mouseIsOvering11 == true) {mostraImmagine11();
  } else if (mouseIsOvering12 == true) {mostraImmagine12();
  } else if (mouseIsOvering13 == true) {mostraImmagine13();
  } else {clear();}
  // console.log(mouseIsOvering);
}

function mouseStatus(status) {mouseIsOvering = status;}
function mouseStatus2(status) {mouseIsOvering2 = status;}
function mouseStatus3(status) {mouseIsOvering3 = status;}
function mouseStatus4(status) {mouseIsOvering4 = status;}
function mouseStatus5(status) {mouseIsOvering5 = status;}
function mouseStatus6(status) {mouseIsOvering6 = status;}
function mouseStatus7(status) {mouseIsOvering7 = status;}
function mouseStatus8(status) {mouseIsOvering8 = status;}
function mouseStatus9(status) {mouseIsOvering9 = status;}
function mouseStatus10(status) {mouseIsOvering10 = status;}
function mouseStatus11(status) {mouseIsOvering11 = status;}
function mouseStatus12(status) {mouseIsOvering12 = status;}
function mouseStatus13(status) {mouseIsOvering13 = status;}

function mostraImmagine() {
  image(img, mouseX, mouseY + 20, (img.width / 4), (img.height / 4))}
function mostraImmagine2() {
  image(img2, mouseX, mouseY + 40, (img.width / 6), (img.height / 4))}
function mostraImmagine3() {
  image(img3, mouseX, mouseY + 40, (img.width / 4), (img.height / 7))}
function mostraImmagine4() {
  image(img4, mouseX, mouseY + 50, (img.width / 4), (img.height / 5))}
function mostraImmagine5() {
  image(img5, mouseX, mouseY - 30, (img.width / 4), (img.height / 6))}
function mostraImmagine6() {
  image(img6, mouseX, mouseY -40, (img.width / 4), (img.height / 5))}
function mostraImmagine7() {
  image(img7, mouseX, mouseY -100, (img.width / 6), (img.height / 4))}
function mostraImmagine8() {
  image(img8, mouseX, mouseY + 20, (img.width / 4.5), (img.height / 5))}
function mostraImmagine9() {
  image(img9, mouseX, mouseY - 20, (img.width / 3), (img.height / 4))}
function mostraImmagine10() {
  image(img10, mouseX, mouseY + 20, (img.width / 6), (img.height / 4))}
function mostraImmagine11() {
  image(img11, mouseX, mouseY - 60, (img.width / 5), (img.height / 4))}
function mostraImmagine12() {
  image(img12, mouseX, mouseY - 80, (img.width / 4), (img.height / 4.5))}
function mostraImmagine13() {
  image(img13, mouseX, mouseY - 140, (img.width / 5.5), (img.height / 4))}

这是我链接它的索引的一部分：

                    <div id="p01" onmouseover="mouseStatus(true);" onmouseout="mouseStatus(false);">
                        <h1 id="main-subtitle" class="text-hover margin-index-top">
                            <a href="pages/spleen.html" id="project01" class="text-hover shadow-phone pointer">1. SPLEEN / editorial design</a>
                        </h1>
                    </div>

十分感谢。

Answer 1

因此，正如所指出的，代码有点难以阅读。 使用一些For 循环并在 arrays 中加载图像会有所帮助，并将图像绘制到屏幕上。

除此之外，您还使用了许多动画 gif，它们可能非常大并且需要一段时间才能加载。 我不确定我是否理解：

如果我隐藏它，该网站在每台设备上都能完美运行。

你是说如果你不运行你的 p5.js 草图网站运行正常吗？ 我不知道我是否理解这可能是因为您的 setup() 正在加载大量图像文件。

建议是：清理代码并减小文件大小。

p5.js 本身并没有那么大，因此要加载的资源不应该对延迟造成太大影响。