add or remove after resize

[stereonom]

I have to load different ads in portrait-mode than in landscape mode of tablets and smartphones.

I'm already using https://github.com/JoshBarr/on-media-query, so I could trigger any kind of event to get lazy-ads to check again.

Is there something?

[jameswragg]

If you look at the develop branch I'm now creating a LazyAds global object, with a LazyAds.init() method that you can fire from your on-media-query event. It will try and find the unloaded ads & if criteria is met then load them. I'm getting erratic behaviour in my tests, it may be the ad provider I'm testing against, can you report back? Also, I'm now observing the resize event for changes.

[stereonom]

Seems to work. But I'm getting "Uncaught ReferenceError: tagname is not defined " again.

[jameswragg]

Great. Regarding the reference error, is there any possibility you could create a test case for me? Thanks!

[stereonom]

Here's my test: http://stereonom.de/lazy/index.html Without jQuery everything is working correctly. With jQuery I get the "Uncaught ReferenceError: tagname is not defined" error.

As you are loading the ads observing the resize event, are you able to unload them? That would be awesome.

[jameswragg]

Perfect, thanks Philip. Hopefully I'll be able to look into this later this week. As for the unloading the ad on a resize, can you give a use case? If it's so ads show and hide as you resize the browser then it may be better to target the ad containers with media queries & show/hide with CSS.

[stereonom]

Usecase for unloading: When you rotate your iPad from portrait into landscape mode, this often means the sidebar gets shown – when I sell my ads the advertiser want the ad to appear somewhere at the top of the page. So the first place in the sidebar is very common. But on mobile devices (or iPad portrait-mode) the sidebar is at the bottom of the page. So I want to load them after the first blogpost.

Just hiding them with css isn't allowed :-1:

[gerritvanaaken]

We need this badly.

+1 for dynamic loading/unloading of ads at changing media query environments

[tekdope]

Any news regarding this branch?

[jameswragg]

Ok so I've just pushed some changes that include unloading of the ads if the content is loaded but the requirements no longer are being met. If you sync the develop branch, run 'grunt test', then browse to http://localhost:9000/tests/index2.html you'll see the dynamic load/unload of the placeholder ads.

I've not tried this with real ad-code just yet, can you let me know your milage.

[jameswragg]

Hi @tekdope @gerritvanaaken @stereonom, just wondering if you've had a chance to test the code? I'm wanting to close the issue & merge with master.

[gerritvanaaken]

The dev version doesn’t show any ads at all, regardless of the windows size... it fires the script after each resize, which is fine, but the output is always the same:

Lazyad init. Using jQuery/Zepto: true Using jquery Using jquery Using jquery Using jquery Using jquery Lazy-loaded count: 0 ~1ms

[jameswragg]

@gerritvanaaken thanks Gerrit, please sync again. I found an issue when the script tried to use jQuery for it's selectors & as mentioned on the pull request, I've decided to drop that functionality due to performance reasons.

[gerritvanaaken]

Now the dev-script doesn’t do anything after resizing. It works exactly like the non-resize version…

[jameswragg]

Looking at the demo (which uses this version of the script) I see no issue? http://htmlpreview.github.io/?https://github.com/madgex/lazy-ads/blob/develop/tests/index2.html

[gerritvanaaken]

Sweet, now I got it right. Looks good. If I encounter further problems, I will drop you a line!

[jameswragg]

Great. @stereonom does this address your issue?

[stereonom]

yeah, seems good. I'll look deeper into it, when I have more time :-)