web2ajax : The Blog

mar2010255 talks

jQuery Lazy Load Ad is a jQuery plugin that takes advantage of Lazy Load delaying ads loading.
– Highly improve general page load (Ads are displayed after the page load and only inside the viewport)
– Compatibility with AdSense and many other advertisers
– Cross Browser support (IE5.5+, Firefox, Opera, Chrome, Safari)

A new version of this post and of the jQuery Lazyload Ad plugin is available here

Gains on my blog : 65% for the page load, and 52% for page weight
-> Without lazy Load Ad : Page loaded in 8.88s (371.98kb)
-> With : page loaded and accessible in 3.17s (179.18kb)

Big thanks to Mika Tuupola for the Lazy load part
-> http://www.appelsiini.net/projects/lazyload

Another big thanks to FrankT and his document.write overload code
-> http://blog.phpbuero.de/?p=26

To View Demo, simply look at all the ads on web2ajax, they are loaded by Lazy Load Ad.
You can either view the full page Demo by clickinh on ‘Demo’ Button just below to know how to use it on your own website.

INSERT AD CODE

First, insert placements into your HTML code.
For that, you can use a ‘div’ tag.
Apply a specified class, only used for lazyLoad Ad uses, as example ‘lazyLoadAd_places’
So you have this :

<div class="lazyLoadAd_places"></div>

Now, call the ad publisher code and put it into the div attributes, named as ‘original’.

For example with original BlogBang code :

<div>
    <script src="http://www.blogbang.com/d.php?id=a16a937291&n=1&p=L&o=SLW&w=300" type="text/javascript"></script>
</div>

Becomes :

<div class="lazyLoadAd_places" original='http://www.blogbang.com/d.php?id=a16a937291&n=1&p=L&o=SLW&w=300'></div>

To finish you can put ‘code’ tags into the div, code will be evaluated as javascript, just before calling publisher script (look to adsense example).
You can put either HTML code, like tags or image mobile replacements. Degraded content will be replaced by document.write when called.

EXAMPLES

In your HTML code for adSense:

<div class="lazyLoadAd_places" original='http://pagead2.googlesyndication.com/pagead/show_ads.js'>
    <code><!--
        google_ad_client = 'YOUR_AD_CLIENT_ID';
        google_ad_slot = 'YOUR_AD_SLOT';
        google_ad_width = 300;
        google_ad_height = 250;
        //-->
    </code>
</div>

In your HTML code for eBuzzing:

<div class="lazyLoadAd_places" original='http://www.ebuzzing.com/player_blog/player.php?parametre=115660'></div>

In your HTML code for BlogBang :

<div class="lazyLoadAd_places" original='http://www.blogbang.com/d.php?id=a16a937291&n=1&p=L&o=SLW&w=300&c=2222222&bg=121212'>
    <a href="http://www.blogbang.com/" target="_blank"><img src="http://www.blogbang.com/s.php" border="0" alt="BlogBang"></a>
</div>

HOW TO CALL LAZY LOAD AD

Insert the script declarations just before the ‘body’ endtag.

After loading the last jQuery version and document is ready, lazyLoad the Ads

    ...

    <script type="text/javascript" src="/assets/js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="/assets/js/jquery.lazyLoadAd.min.js"></script>
    
    <script type="text/javascript">
    $(document).ready(function() {
	
        // Load LazyLoad Ad on each dom with classname 'lazyLoadAd_places'
        $(".lazyLoadAd_places").lazyLoadAd({
            threshold: 200,
            onComplete: function() {
                // -- Pub is displayed !
            }
        }) ;
    }) ;
    </script>

    ...
    </body>
</html>

5 commentaires

  • Refreshi Weblog | News and Inspiration » 28 Best jQuery and JS plugins for your website’s presence Said:

    [...] jQuery Lazy Load Ad Plugin [...]

    12 août 2012 16:13

  • G.N.R.S.U Said:

    does that obtain the google adsense's rules ???

    28 avril 2011 08:37

  • Fabien Said:

    En fait c'est bon j'ai trouvé !

    Il suffit d'ajouter un petit bout de script du style :

    $(document).ready(function() {

    $(".post_content img").lazyLoadAd({

    threshold: 800,

    onComplete: function() {

    }

    }) ;

    })

    Mais si on scrolle un peu vite, comme tu as enlevé le paramètre "placeholder" l'effet visuel est ... déconcertant :(

    Bonnes vacances ;)

    19 août 2010 23:54

  • Guillaume DE LA RUE Said:

    Hello Fabien,

    Je suis en vacances encore jusqu'a lundi.

    Je te fais signe des mon retour devant un vrai ordi. Pour moi, le probleme doit venir des bind jquery qui se remplacent plutot que de se juxtaposer.

    A mon retour, je te fais une petite version de toute efficacité :)

    Bye

    19 août 2010 22:46

  • Fabien Said:

    Merci pour ce plug-in !

    Comment peut on faire d'une pierre 2 coups et continuer à utiliser LazyLoad sur des images en meme temps ?

    J'ai bien essayé d'installer en plus LazyLoad... sans surprise il ne fonctionne plus une fois LazyLoadAds chargé :(

    Une solution ?

    19 août 2010 17:26

LEAVE A COMMENT