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

Source: Internet
Author: User
Tags bind config end root directory

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



Related Article

Alibaba Cloud 10 Year Anniversary

With You, We are Shaping a Digital World, 2009-2019

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.