Web front-end development, introduction to slow loading for pictures

Technical background

Now the web system, for some of the picture resources are more, and once unable to browse through the entire page, picture slow loading can improve the client experience, such as it Big Head: Taobao, NetEase, Sina and so on ...

Technical Principle

Technology to put it bluntly, in fact, that is the case, understand the simple, hehe ~

1. Preset picture properties, "src" point to a small map, "_SRC" point to the real picture address;

2. Get browser scrolling events;

3. Calculate the current browser Drop-down position, by height to determine whether the need to load pictures;

4. For the need to replace the picture, set the true src value (the original _SRC value)

Technology Implementation

This side I wrote a demo, will be at the end of the page to give a download link ^__^

So now I describe the implementation of this demo, this demo does not contain design problems, only provide technical ideas.

First I built an empty Web site system, added corresponding file resources, as shown in the figure:

The Content/images directory stores 2 pictures, respectively: nopic.png/not loaded with the small map, TEST. png/need to load the picture

Root directory 2 JS files, respectively: Jquery-1.8.0.min.js (jquery file), Index.js (Implementation script)

The root directory default.aspx, the target test page, the following is the HTML contraction screenshot, the red box is the display picture area, needs the slow loading picture:

The following is the core fragment code for Index.js:

Height compute function Testweb.layoutscroll = Functions (config) {    var me = this;     var defaults = {       //Parameters         Box:null,          Isgoo:false,        //initialization          init:function () {           // is IE, and read out IE version             Me.isie =!! Navigator.userAgent.match (/msie\b\s* ([0-9]\.[
0-9]);/img);
            Me.isie && (Me.isie = regexp.$1);             Me.isgoo =!!
Navigator.userAgent.match (/APPLEWEBKIT\B/IMG);             Me.box = Me.isie?
Document.documentElement:document;             Me.bind ();        },         bind:function () { & nbsp;          me.box.onscroll = function () {                 read the scroll bar position and the browser window display size                  var top = Me.isgoo? Document.body.scrollTop:document.documentElement.scrollTop,                      left = Me.isgoo? Document.body.scrollLeft:document.documentElement.scrollLeft,         
            width = document.documentElement.clientWidth,                     height = document.documentElement.clientHeight;                    


        var lookheight = top + height;                    
            var headerh = 120;
                var texth = 300;


                var imageh = 300;                //Calculate height for src substitution                  if (Lookheight > (Headerh + Texth + Imageh +)) {            &Nbsp;       $ ("#ImageList2 img"). each (function () {                        

var src = $ (this). attr ("_src");                   
      $ (this). attr ("src", SRC);                   

 });                }                 //Calculate height for src substitution                   if (Lookheight > (headerh + texth + imageh) * 2) + ) {                   &nbsp $ ("#ImageList3 img"). each (function () {            

            var src = $ (this). attr ("_src");                   
      $ (this). attr ("src", SRC);                   
 });                }                 //Calculate height for src substitution                   if (Lookheight > (headerh + texth + imageh) * 3) + ) {                     $ ("#ImageList4 img"). each (function () {                 

       var src = $ (this). attr ("_src");                   
      $ (this). attr ("src", SRC);                   
 });                }             }        }    

};
    testweb.apply (Me, config, defaults);     me.init (); //init}

Demo download

I use Google browser 24.0.1312.5, IE8 test through, interested friends can download demo, with developer tools to track the execution of the script.

Download address: Click my download