iPad2，iPhone 4S上的iOS网站加载问题

Question

I am developing a site that is having some issues loading on older iOS hardware. I am pretty sure that the issues are related to the total size of the images being loaded into the site (large graphic designer portfolio visuals), but have been unable to find any documentation on these limitations of the hardware. Site is coded in HTML/CSS/JS with some jQuery libraries for the home slideshow. Site was built using Yeoman and scaffolded with Twitter Bootstrap 3.

URL: http://bradshawdesignsolutions.com

iOS8 tested: iPad Air (2013) => ok, Retina Mini (2013) => ok, iPhone 4S => hangs/crashes

iOS7 tested: iPad 2 => hangs/crashes

Any help that could point me in the right direction for resolving this issues would be greatly appreciated. Even if the solution is cut the images in half...

Answer 1

You seem to be loading massive images into the iPad2, it only has a 1024x768 screen but many of your images are much bigger. eg this http://bradshawdesignsolutions.com/images/bg-slides/0f5416af.slide-4.jpg is 2025x1207, and there appear to be several at this size.

The inspector is also showing this Javascript error:

[Error] TypeError: null is not an object (evaluating 'e.text')
    c (8bda17b1.vendor.js, line 4)
    assetLoaded (8bda17b1.vendor.js, line 4)
    d (8bda17b1.vendor.js, line 4)
    dispatch (8bda17b1.vendor.js, line 2)
    handle (8bda17b1.vendor.js, line 2)

If you have a Mac on hand I would plug the iPad 2 into it (after enabling Web Inspector in Safari's Settings) and use the Inspect sub-menu in Mac Safari's Develop menu to see what's going wrong.