Question

I’m using a preloader from an article, QueryLoader2 – Preload your images with ease. Works great in most desktop browsers, but I’m having issues with it on iOS.

Is there a way to exclude iOS devices running the script without serving a different page?

This is my code:

$(document).ready(function () {
    $("body").queryLoader2({
        barColor: "#FFFFFF",
        backgroundColor: "#000000",
        percentage: true,
        barHeight: 1,
        completeAnimation: "grow",
        minimumTime: 1000
    });
});

I can’t get the window.addEventListener to work with iOS for some reason.

Answer 1

You can check the user agent string.

if(!((navigator.userAgent.match(/iPhone/i)) || 
   (navigator.userAgent.match(/iPod/i)) ||
   (navigator.userAgent.match(/iPad/i)))) {
    // do non iOS stuff here
}

Your code will look like

$(document).ready(function () {
    if(!((navigator.userAgent.match(/iPhone/i)) || 
      (navigator.userAgent.match(/iPod/i)) ||
      (navigator.userAgent.match(/iPad/i)))) {

        $("body").queryLoader2({
            barColor: "#FFFFFF",
            backgroundColor: "#000000",
            percentage: true,
            barHeight: 1,
            completeAnimation: "grow",
            minimumTime: 1000
        });
    }
});

I would also look into the iOS code provided on that page to see if that resolves your issue.

window.addEventListener('DOMContentLoaded', function() {
    $("body").queryLoader2();
});