Infinite Scroll on iPhone's Safari, slow to load (if at all)

[csdude55]

I've been rebuilding my site to use Infinite Scroll in several sections. It uses a library called ScrollMagic, so when the user scrolls to the bottom of the page it loads an HTML fragment of the same page but with a query string variable via PHP that tells it where to start.

At the bottom of each fragment, I have an Adsense banner.

On my Android phone, this works perfect... the banner shows and I have a little animated circle beneath it for 1-2 seconds, waiting for the next section to load.

But I just learned that when I scroll down kind of fast on Safari on iPhone, the user gets to the banner and there's no animated circle or anything to let the user know that there's more to come. Then it just kind of... stays there. For like 30 seconds. I tried scrolling up, and it got halfway between an Adsense banner before it wouldn't scroll up any further.

If I scroll down slowly it doesn't do this, only when I scroll down kind of fast.

It's not an issue of multiple iterations being on the page and slowing things down, it happens on the first iteration.

My only guess is that it's waiting for the banner to completely load before moving on to the next part?

If anyone else has experienced this issue, what did you do to fix it? Or can you guys suggest anything I can do on an iPhone to track down the source of the problem?

[NickMNS]

AdSense and infinite scroll don't work well together. The issue being that you can't automatically reload the ads, so if you put the ad on a portion of the page that remains static, it will only be seen once and never reloaded.

Alternatively you can insert new ad code each time you insert new content, but then things get tricky. If you insert the new content by using a method that uses document.write(), such as jQuery's $.html(), then each insertion of a new ad block will call for a new ad, including for those already on the page. Thus layering new ads on top of existing ones (not a good look in terms of policy). To avoid this you need to use something a method such as insertAdjacentHTML() [plain vanilla, I don't know what the jQuery equivalent would be]. But simply adding the code in this will do nothing. Bbecause there is no page load event to call js-function that loads the ad. To fix this you need to, for the ad code being inserted, separate the js function calls (<script> tags in the code) from the html in the ad code (<ins> tags in the code). The first <script> tag get the script, the second calls the function. The first one can simply be called in the head of the page once. The second line needs [adsbygoogle = window.adsbygoogle....] needs to be called in your script after you inserted the html to the page.

Now you say "but this doesn't answer my question!" no, but maybe yes. I discovered this because the same artifacts of document.write() that were causing problems with AdSense were also causing problems with other elements on the page. With each insertion I was getting strange elements nested in others in some really hard fathom ways. Basically as I understand it, document.write takes content of the html element selected copies it to memory, takes the new content appends it to the data in memory and the takes the complete block and re-inserts it back on the page. And for some reason, that I don't understand it doesn't overwrite the existing content. So basically it causes issues. More concerning is that a the page grows, each time it will be taking an ever large chunk of data putting it into memory.

I'm not sure if this helps you, specially since your are using a third party library.

[csdude55]

I'm actually inserting the Adsense code using DFP, using their tutorial on how to do it:

[support.google.com...]

It was a HUGE pain to set up correctly, and like most Google products, it took forever just to figure out the logic. But in theory it doesn't load the ad slot until it's in view, then it refreshes the slot with a new banner.

It's definitely the combination of Adsense / DFP and Safari, though... it doesn't have any problems on any other browsers I've tested (even Silk on Kindle), and when I disabled Adsense it worked fine on Safari. But currently Safari is my top mobile browser (funny, because last year Android was CRUSHING iPhone on my sites!), so I can't just ignore it, and I can't disable Adsense for Safari.