1

I have a pretty large script in my page that seems to be crashing my site on iPads. It's a vertical image carousel that runs on intervals and it involves 5 functions. I can remove the script and then the site loads fine on iPad but the carousel no longer works (which is OK on ipad).

How can I disable this script on iPad?

I tried using this: http://davidwalsh.name/detect-ipad

basically:

<script>
var isiPad = navigator.userAgent.match(/iPad/i); 

if ( !isiPad ) {
//large script goes here with multiple functions
}

</script>

Do I need to wrap each individual function in "if ( !isiPad ){} ? Is there any way I can only allow the entire script to run if the device being used is NOT an ipad?

Thanks in advance for help!

The full script can be seen here: https://jsfiddle.net/hf9tf7rs/

njpatten
  • 165
  • 1
  • 3
  • 15

2 Answers2

1

You've got the right idea! Just about any solution to this problem will involve using JS to detect the device or relevant browser feature and set a flag (like isiPad) which you can use in your code to turn on/off relevant bits of code.

A couple of things might improve this approach slightly, however:

  1. If you can identify exactly what it is about the carousel that's acting up on iPad, you may be able to identify just one function that needs the isiPad conditional. E.g., if there's a $('#carousel').initCarousel() call somewhere, just wrap that one call in a conditional and you're done! If the carousel code is scattered around the codebase, see if you can't refactor it somehow to create a single bottleneck where you can put the isiPad check. An initialization block is a great spot for this. I can't be more specific without seeing your code, but if you find yourself repeating the if ( !isiPad ) {} block more than 2-3 times, take that as a red flag to seek a more central spot for it.

  2. If you can identify which feature of the iPad's browser/bandwidth/CPU/GPU is causing the problem, you may be to use Modernizr (http://modernizr.com/) or a similar feature detection library to solve this problem on other similar devices. What appears to be an iPad bug is very frequently reproducible on other mobile tablets, and only checking for /iPad/i may leave the bug live on other devices.

rossettistone
  • 364
  • 2
  • 11
0

Another user had asked beforehand how to conditionally load scripts. With this in mind, what you could do is as follows:

<script>
var isiPad = navigator.userAgent.match(/iPad/i); 

if ( !isiPad ) {

    // Append the new <script> tag to <head>
    var head = document.getElementsByTagName('head')[0];
    var js = document.createElement("script");

    js.type = "text/javascript";
    js.src = "insert-source-path-here.js";

    head.appendChild(js);

}
</script>
Community
  • 1
  • 1
Adam Frederick Wiseman
  • 223
  • 1
  • 6