Make your page lighter – defer images to load

June 21st, 2009   Filed Under Javascript, Tips & Tricks, comparisons, jQuery, optimization, snippet, utilities  

As web professionals we are generally concerned with the page load time, especially when we have a lot of images loading from third party servers which adds up to the page performance.
Portal developers are mostly worried and concerned with this problem.

I and my friend Shon Thomas have tried putting some thoughts and developed a jQuery plugin which will solve this problem.
The technique used here goes as follows:
We do not assign the “src” value to the images we want to load dynamically. Instead assign that URI in a different validator-friendly attribute. For example, you can use “class” or “longdesc”.
Upon scrolling the page, the plug-in detects the images in the viewport area of the browser window and swaps longdesc(or class) with src.

In both the attributes(class and longdesc) I don’t see any problem and they can be used as per your convenience and belief.There could be some argument regarding usage of both of these attributes; But as far as I think I have my reasonable words for both.
1) class: 99% of the time you don’t assign a class name to any image, instead you control them with their parent elements. Even then, if you are so specific, use longdesc.
2) longdesc: longdesc is a very rarely used attribute. I don’t often see people using this attribute on the content images. Even then, if you are specific then either use class attribute or don’t use this functionality for that particular image(as simple as that).

The image html that your server spits should be somewhat like this:

    <img src="http://o.aolcdn.com/shopping.aol.com/img/notavailable.gif" longdesc="http://ai.pricegrabber.com/pi/7/19/48/71948063_160.jpg" alt="Dansko Reese Dress Pumps - Calfskin Leather - For Women" title="Dansko Reese Dress Pumps - Calfskin Leather - For Women"/>

Source Code: The source code below is the plug-in which can go in your jquery plugin file(s) or can get included as a standalone include.

/**
 * jQuery plugin: Lazy Image Loader
 * version: 3.0
 * Author: Vivek Pohre,Shon Thomas
 * Website: (http://www.vivekpohre.com)
 * Example: call lzload() at or after document ready
 */

function lzload(){
    var w=window,adv=30,vph,tmpLD,nowView,collImg,imgTop,scrTop,ci;
    function getVPH(){
	    //DETERMINE WINDOW VIEWPORT HEIGHT ALWAYS TO AVOID RESIZING BROWSER ERROR
	    if(typeof (vph = w.innerHeight?w.innerHeight:$(w).innerHeight()) != "Number")
	        vph = document.documentElement.clientHeight;
    };

    //SAVE THE Y AXIS IN TOP ATTRIB
    getVPH();//GET THE VIEWPORT HEIGHT
    imgTop = 0;//INIT IMGTOP TO ZERO--TEMP VAR
    collImg = $("#content img").filter(':[longdesc]');//COLLECT ALL IMAGES HAVING longdesc ATTR
    collImg.each(function(){
    	imgTop = $(this).offset().top;
    	$(this).attr("top",imgTop);
    });
    $(w).bind("scroll",function(){loadImgs()}).bind("resize",function(){getVPH();loadImgs()});//ATTACH SCROLL & RESIZE EVENT TO WINDOW
    $.loadImgs = loadImgs = function(imgSet){//MAKE loadImgs FUNCTION PUBLIC
    	ci=(imgSet)?imgSet.show():collImg;//DECIDE COLLECTION FROM PASSED OR ALL DOM IMAGES
        scrTop = $(w).scrollTop();
        //DETERMINE THE Y-AXIS IN THE VIEWABLE AREA
        nowView = (scrTop+vph+adv);
        ci.filter(':[longdesc]').filter(':visible').each(function(i){
            if($(this).attr("top")<nowView){
            tmpLD = $(this).attr("longdesc");
            if(typeof tmpLD!='undefined')
               $(this).attr("src",tmpLD)[0].removeAttribute("longdesc",0);
            }
        });
        ci=collImg;
    };
    loadImgs();
    $("#content img").error(function(){
		$(this).attr("src","http://o.aolcdn.com/shopping.aol.com/img/notavailable.gif");
	});
}

Post Linx
Permalink | Trackback | | Print This Article | 2 Comments

Reverse Engineer Packer javascript

June 11th, 2009   Filed Under Good to know, Javascript, Tips & Tricks, browser, debuggers, firefox, gyan  

Have you ever seen a code something like this:

eval(function(p,a,c,k,e,r){e=funct.... etc....

And you suffer reading the encoded code. No suffers now; because I am going to tell you a trick  that will convert your packer code in a readable script.

And it is really simple …. just replace the eval word with alert and refresh your page. You can now copy the code from the alert box.

If you face the problem of copying it from the alert box then open firefox browser with firebug pre-installed.

Open the console using F12 key and paste the code in the editable window.

Now replace the first word “eval” with “console.log” and hit run.

Probably you would need Javascript Tidy to make it properly readable.

Enjoy Madi!!

Post Linx
Permalink | Trackback | | Print This Article | Leave a Comment