Why is my website images are swapping and the page is hanging on iPhone web browsers only?

Question

I have a website written in ASP.NET MVC (Razor). Recently, a few days ago the images on the website started swapping all over the place. When refreshing the site, it might just hang for quite some time or load all images correctly. So I plugged my iPhone to my Mac and used the web inspector to see whats going on. I found out that at the time of load the browser hangs on certain files. These files are either images or js libraries. The images are very small. Less then 10kb so it is not the size of the image.

This issue only happens on iPhones. I checked on several iPhones.

I have tried multiple Android devices, Mac and Windows computers and they all load fast and every image is in the right place - no issues.

I researched a bit and found out some interesting references to HTTP Pipelining. But if that was is the case, why would these issues start now?

I do not know what to thing anymore.

What am I trying to understand is why would that only happen on the iPhone?

Thank you, Any clue would be appreciated.

Answer 1

I had the same issue. After months of breaking my head I decided to implement lazy load on all images. After that, swapping never occurred.

Page hanging could happen because of multiple reasons. I would definitely check the code again and in particular look for the way you handled unmanaged resources. More on unmanaged resources