Script causing parts of site to hang

Solved
Highlighted
Excursionist
57 0 6

Hello,

I just added a glitch effect javascript to my site.
It's functioning fine on the homepage (the gallery of tattoos at the bottom of killyourgod.net), but I just noticed that it causes the site to hang indefinitely when I try to go anywhere else on the site. 

I have {{ 'glitch-gallery.js' | shopify_asset_url | script_tag }} above the closing head tag.
The script is placed above the closing body tag:

<script>
var glitchIntensity = 5;
var glitchFramerate = 24;

$(document).ready(function () {
var gridItems = document.getElementById("glitch-gallery").childNodes;
var images = [];
for (var i = 0; i < gridItems.length; i++) {
if (gridItems[i].tagName === "IMG") {
images.push(gridItems[i]);
}
}
var timer = 0;
var timerLim = 100;
var speed = 1000 / 24;
var copies = [];
for (var i = 0; i < images.length; i++) {
// Create the psuedo-grid
var copy = document.createElement("img");
copy.src=images[i].src;
copy.style.width = images[i].offsetWidth;
copy.style.height = images[i].offsetHeight;
copy.style.position = "relative";
document.getElementById("glitch-gallery-copy").append(copy);
copies.push(copy);
}
for (var i = 0; i < images.length; i++) {
// Glitch it out
glitchImage(images[i], i, copies);
}
});
function glitchImage(el, i, copies) {
var interval = setInterval(function () {
glitch(copies, i);
}, 1000 / glitchFramerate);

var glitch = function (copies, i) {
var width = el.offsetWidth;
var height = el.offsetHeight;
var path = `0% 0%, 100% 0%`;
var sliceHeightRange = [5, 17];
var sliceCount = Math.floor(getRandom(1, 3));
var currentY = 0;
var addPoint = function (x, y) {
// Add to the polygon path
path += `,${x}% ${y}%`;
};

var copy = copies[i];
var shake = glitchIntensity;
copy.style.left = Math.floor(getRandom(-shake, shake)) + "px";
copy.style.top = Math.floor(getRandom(-shake, shake)) + "px";

var addSlice = function (cutHeight) {
currentY += Math.floor(getRandom(5, 33));

// Show image above
addPoint(100, currentY);
addPoint(0, currentY);

// Cut out
currentY += cutHeight;
addPoint(0, currentY);
addPoint(100, currentY);
};

for (var i = 0; i < sliceCount; i++) {
addSlice(Math.floor(getRandom(sliceHeightRange[0], sliceHeightRange[1])));
}

// Apply
path += ",100% 100%, 0% 100%, 0% 0%";
el.style.clipPath = `polygon(${path})`;
};
}

// Get a random number between two values
function getRandom(min, max) {
return Math.random() * (max - min + 1) + min;
}
</script>

I'm also trying to make it a 3 column gallery on mobile, but adjusting the bootstrap columns breaks the script (along with adding links to the images).
I'd like to apply the script to the collection and music gallery images as well, but couldn't get that to work either.

If anybody can assist, it'd be much appreciated.
Thanks!

0 Likes
Highlighted
Astronaut
1082 177 213

Hey,

You can try replacing <script> by <script defer>.

To put it succinctly, it will make your page visible while the script loads giving a sensation of faster loading. Further technical information can be found here.

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Hire me! Recommended by 25+ customers on Facebook. Click here to read their reviews.
◦ Contact me at: diego.boarutto.fortes@gmail.com
0 Likes
Highlighted
Excursionist
57 0 6

Hi, thanks for the response. That doesn't fix the issue though. Any page besides the home page won't load at all.

0 Likes
Highlighted
Astronaut
1082 177 213

What is the link to your website please?

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Hire me! Recommended by 25+ customers on Facebook. Click here to read their reviews.
◦ Contact me at: diego.boarutto.fortes@gmail.com
0 Likes
Highlighted
Excursionist
57 0 6
0 Likes
Highlighted
Astronaut
1082 177 213

This is an accepted solution.

This is happening because it can't find the "glitch-gallery" element in your code (since it's present only at the home page as far as I can tell), then it freezes.

I'm working a bit in the dark in here, ideally I'd need to debug and test it out to find a decent fix, but try this out:

 

 

<script defer>
var glitchIntensity = 5;
var glitchFramerate = 24;

$(document).ready(function () {
  var gridItems = document.getElementById("glitch-gallery");

  if (!gridItems) {
    return;
  }

  gridItems = gridItems.childNodes;

  var images = [];
  for (var i = 0; i < gridItems.length; i++) {
    if (gridItems[i].tagName === "IMG") {
      images.push(gridItems[i]);
    }
  }
  var timer = 0;
  var timerLim = 100;
  var speed = 1000 / 24;
  var copies = [];
  for (var i = 0; i < images.length; i++) {
    // Create the psuedo-grid
    var copy = document.createElement("img");
    copy.src=images[i].src;
    copy.style.width = images[i].offsetWidth;
    copy.style.height = images[i].offsetHeight;
    copy.style.position = "relative";
    document.getElementById("glitch-gallery-copy").append(copy);
    copies.push(copy);
  }
  for (var i = 0; i < images.length; i++) {
    // Glitch it out
    glitchImage(images[i], i, copies);
  }
});

function glitchImage(el, i, copies) {
  var interval = setInterval(function () {
    glitch(copies, i);
  }, 1000 / glitchFramerate);

  var glitch = function (copies, i) {
    var width = el.offsetWidth;
    var height = el.offsetHeight;
    var path = `0% 0%, 100% 0%`;
    var sliceHeightRange = [5, 17];
    var sliceCount = Math.floor(getRandom(1, 3));
    var currentY = 0;
    var addPoint = function (x, y) {
      // Add to the polygon path
      path += `,${x}% ${y}%`;
    };

    var copy = copies[i];
    var shake = glitchIntensity;
    copy.style.left = Math.floor(getRandom(-shake, shake)) + "px";
    copy.style.top = Math.floor(getRandom(-shake, shake)) + "px";

    var addSlice = function (cutHeight) {
      currentY += Math.floor(getRandom(5, 33));

      // Show image above
      addPoint(100, currentY);
      addPoint(0, currentY);

      // Cut out
      currentY += cutHeight;
      addPoint(0, currentY);
      addPoint(100, currentY);
    };

    for (var i = 0; i < sliceCount; i++) {
      addSlice(Math.floor(getRandom(sliceHeightRange[0], sliceHeightRange[1])));
    }

    // Apply
    path += ",100% 100%, 0% 100%, 0% 0%";
    el.style.clipPath = `polygon(${path})`;
  };
}

// Get a random number between two values
function getRandom(min, max) {
  return Math.random() * (max - min + 1) + min;
}
</script>

 

 

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Hire me! Recommended by 25+ customers on Facebook. Click here to read their reviews.
◦ Contact me at: diego.boarutto.fortes@gmail.com
1 Like
Highlighted
Excursionist
57 0 6

That worked, thanks so much!

0 Likes