# P5.js iframe not loading?

**URL:** <https://discourse.processing.org/t/p5-js-iframe-not-loading/27066>\
**Category:** Coding Questions\
**Created:** [January 14, 2021, 10:22pm UTC](https://discourse.processing.org/t/p5-js-iframe-not-loading/27066 "2021-01-14T22:22:34Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![georg2a](https://avatars.discourse-cdn.com/v4/letter/g/ecc23a/32.png) [@georg2a](https://discourse.processing.org/u/georg2a)\
**Post date:** [January 14, 2021, 10:22pm UTC](https://discourse.processing.org/t/p5-js-iframe-not-loading/27066/1 "2021-01-14T22:22:34Z")

</div>

hi,

https://editor.p5js.org/georg2a/embed/DjlxhZ2W6Thttps://editor.p5js.org/georg2a/present/DjlxhZ2W6T

i’ve embedded multiple p5.js files into a website and all have worked except the one above; it freezes on “Loading…” as it does on [processing.org](http://processing.org). i’m not sure why its any different to the others, it has https too.

thanks for anyone who takes the time to read/respond to this!

```auto
let breads=[];
let title;
let stars=[];

function preload(){
  roll = loadImage("bread.PNG");
  title = loadImage("IMG_1247.PNG");
  stars = loadImage("IMG_0187.GIF");
}

function setup() {
  createCanvas(600, 600);
  imageMode(CENTER);
  for (let i=0;i<1;i++){
   let x = random(width);
   let y = random(height);
   let r = (35);
   let b = new Rolly(x,y,r);
   breads.push(b);
  }
}

function mousePressed(){
  for (let i = breads.length - 1; i >= 0; i--) {
    if (breads[i].contains(mouseX,mouseY))
  {
      breads.splice(i,1);
    image(stars,mouseX,mouseY)
    }
    for (let i=0; breads.length < 1; i++){
      let x = random(width);
      let y = random(height);
      let r = (35);
      let b = new Rolly(x,y,r);
      breads.push(b);
    }
  } 
}

function mouseReleased(){
   for (let i=0; breads.length < 1; i++){
           stars.push(new Star(mouseX,mouseY));
    //stars.reset();
    // stars.pop();
    }
}

function draw() {
  background(0);
  image(title,width/2,height/2,600,600);
  
  for (var i = 0; i < stars.length; i++){  
    stars[i].show();
  }
  
  for (let i = 0; i < breads.length; i++){  
    breads[i].show();
    
     if (breads[i].contains(mouseX,mouseY))
  {
    cursor(HAND);
  } else {
    cursor(ARROW);
  } 
  }
}

class Star{
  constructor(x,y){
    this.x = x;
    this.y = y;
  }
  show(){
    //scale(0.8);
    stroke(255);
    fill(125);
    image(stars,this.x,this.y);
    }
}

class Rolly {
  constructor(x,y,r){
  this.x = x;
  this.y = y;
  this.r = r;
  }
  
  contains(px,py){
    let d = dist(px,py,this.x,this.y);
    if (d < this.r){
      return true;
    } else {
      return false;
    }
  }
  
  show(){
    stroke(255);
    strokeWeight(4);
   // ellipse(this.x,this.y,this.r*2);
    image(roll,this.x,this.y,120,120);
  }
}

```

---

<div class="post-metadata">

**Author:** ![ErraticGenerator](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/erraticgenerator/32/11304_2.png) [@ErraticGenerator](https://discourse.processing.org/u/ErraticGenerator)\
**Post date:** [January 15, 2021, 2:54am UTC](https://discourse.processing.org/t/p5-js-iframe-not-loading/27066/2 "2021-01-15T02:54:04Z")

</div>

It could be that your image is too big for the p5js online editor. You can try to isolate your problem by loading one image at a time in a new sketch. Also, you should remove script tag for images in the index.html.

---

<div class="post-metadata">

**Author:** ![ReyzArtz](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/reyzartz/32/11750_2.png) [@ReyzArtz](https://discourse.processing.org/u/ReyzArtz)\
**Post date:** [January 15, 2021, 9:58am UTC](https://discourse.processing.org/t/p5-js-iframe-not-loading/27066/3 "2021-01-15T09:58:21Z")

</div>

I tried running it, is unable to load the GIF file check the network tab in the devtools  
try using some other gif or a png just to test it if it works or not

---

<div class="post-metadata">

**Author:** ![georg2a](https://avatars.discourse-cdn.com/v4/letter/g/ecc23a/32.png) [@georg2a](https://discourse.processing.org/u/georg2a)\
**Post date:** [January 19, 2021, 12:29am UTC](https://discourse.processing.org/t/p5-js-iframe-not-loading/27066/4 "2021-01-19T00:29:45Z")

</div>

thank you! will try this

---

<div class="post-metadata">

**Author:** ![georg2a](https://avatars.discourse-cdn.com/v4/letter/g/ecc23a/32.png) [@georg2a](https://discourse.processing.org/u/georg2a)\
**Post date:** [January 19, 2021, 12:30am UTC](https://discourse.processing.org/t/p5-js-iframe-not-loading/27066/5 "2021-01-19T00:30:40Z")

</div>

thanks for your response! i tried replacing the GIF with a random JPEG but it still doesn’t load… thanks though