CODEWITHSUNDEEP
javascriptiossafaridelaylatency
s4y
s4y

Reputation: 51705

Safari on iOS waits 10-30s before loading JavaScript at bottom of page

I'm looking for help understanding a bizarre loading delay on iOS. I have this exact HTML:

<!DOCTYPE html>

<img src="img/potatoes0.png"/>
<img src="img/potatoes1.png"/>
<img src="img/potatoes2.png"/>
<img src="img/potatoes3.png"/>
<img src="img/potatoes4.png"/>
<img src="img/potatoes5.png"/>
<img src="img/potatoes6.png"/>
<img src="img/potatoes7.png"/>

<script src="js/jquery-2.1.4.min.js"></script>

…plus eight identical images of potatoes and a copy of jQuery, all hosted on a remote web server.

This page loads pretty much instantly in a normal browser, but Safari on an iPhone (or in the iOS simulator on my computer) waits 11 seconds before loading the JS:

What the heck is going on?

Upvotes: 3

Views: 1840

Answers (2)

Star Plugins
Star Plugins

Reputation: 43

I don't think this is anything to do with jQuery or DOM load events.

I have encountered exactly the same problem testing on an iPod and iPad running iOS 9. I thought I was going nuts.

I created a file called test.js that contains this:

alert("test");

Placing this as a script include at the bottom of my page (just before the body close tag) introduces a significant delay before the file is executed.

Placing the file at the top doesn't cause any issues, so is my only solution currently.

Testing on various non-iOS devices and browsers does not show this problem.

@Sidnicious any chance you can test with a simple file like mine instead of jQuery?

Edit: I found a popular site that includes its JS at the bottom: getbootstrap.com. I visit that site on an iPod or iPad, refresh the page a couple of times and page loading freezes for 10-20 seconds before the JS loads.

Upvotes: 1

Korgrue
Korgrue

Reputation: 3478

jQuery does not trigger until the entire DOM loads.

So, if you have a bunch of images - jQuery wont trigger till all of them are downloaded. To speed this up, try lazy loading your images.

One thing to note on Javscript in all forms as it applies to mobile browsers. If you have any kind of scrolling going on - Javascript will delay running until scrolling stops (this is to reduce battery drain on mobile devices by reducing the load on the processor). This may or may not be related to your issue, but should be noted whenever a JS problem arises only on mobile browsers.

Upvotes: 0

Related Questions