JS Learning Summary----Lazy load thinking and first screen delay loading

Role: To ensure that the speed of the page open (3s if the first page can not be opened is the death pages)

Principle:

1), for the first screen content in the picture: first to the corresponding area a default picture occupies the location (the default diagram needs to be very small, generally can be maintained within 5kb), when the first screen content is loaded complete (or can also give a delay time), I began to load the real picture

2), for other pictures in the screen: Also to a default image placeholder, when the scroll bar scroll to the corresponding area, we start to load the real picture

Extension: Asynchronous loading of data, starting to bind only the first two screens of data loading, the subsequent data is not processed, when the page scrolling to the corresponding region, the data binding in the request to render data

Specifically, you can check

　　

The delay loading code for the first screen is as follows:

<!     DOCTYPE html>{padding:0; Margin:0; Font-size:14px;            } #banner {margin:10px auto;            width:300px;            height:150px;            border:1px solid Green; Background:url (' Img/default.gif ') no-repeat Center Center;/*Add a default image placeholder to the current area, telling the user that the picture is loading*/} #banner img{Display:none;/*at the beginning of the IMG src attribute does not have an address, so that in the IE browser will display a broken graph, not beautiful, so we let its default is hidden, when the real picture loading completed in the display*/Width:100%; Height:100%; }    </style>varBanner = document.getElementById (' banner '), Imgfir = Banner.getelementsbytagname (' img ') [0] Window.settimeout (function(){            //imgfir.src = Imgfir.getattribute (' trueimg ');            //imgFir.style.display = "Block"            //The above processing is still incomplete: if we get the real picture address is wrong, assigned to the IMG src attribute, not only the console will error, and the page will also appear a broken map            //get the address of the picture, verify the validity of the address, is valid only assignment, not valid is not processed            //var oimg = document.createelement (' img ')            varOimg =NewImage;//Create a temporary img tagOIMG.SRC = Imgfir.getattribute (' trueimg ')); Oimg.onload=function(){//when the picture loads properlyIMGFIR.SRC = This. Src; ImgFir.style.display= "Block"; Oimg=NULLConsole.log (' Load complete ')} console.log (' Loading in ... ')        },500)    </script></body>
Lazy loading of multi-screen single picture
The specific code is as follows:
<!     DOCTYPE html>{padding:0; Margin:0; Font-size:14px;            } #banner {margin:10px auto;            width:300px;            height:150px;            border:1px solid Green; Background:url (' Img/default.gif ') no-repeat Center Center;/*Add a default image placeholder to the current area, telling the user that the picture is loading*/} #banner img{Display:none;/*at the beginning of the IMG src attribute does not have an address, so that in the IE browser will display a broken graph, not beautiful, so we let its default is hidden, when the real picture loading completed in the display*/Width:100%; Height:100%; }    </style>varBanner = document.getElementById (' banner '), Imgfir = Banner.getelementsbytagname (' img ') [0] Window.onscroll=function(){            if(banner.isload) {return; }            varA = banner.offsetheight+utils.offset (banner). Top; varB = Utils.win ("clientheight") + Utils.win ("scrolltop")); if(a<B) {                //when the condition is established, we load the real picture, after the first load is completed, we a<b the page in the process of scrolling, and re-perform the following operation, resulting in a duplicate image in a container to load                varOimg =NewImage; OIMG.SRC= Imgfir.getattribute (' trueimg '); Oimg.onload=function() {imgfir.src= This. Src; ImgFir.style.display= ' Block '; Oimg=NULL; } banner.isload=true;//set a custom property to tell the browser that I have loaded the picture (whether or not it is normal to load, as long as it is processed once and will not need to be processed)            }        }    </script></body>
JS Learning Summary----Lazy load thinking and first screen delay loading