Delay loading external JS files, delay loading pictures (jquery.lazyload.js and Echo,js)

JS in the case of delay loading, most can not be separated from the two situations, namely the external JS file delay loading, as well as the delayed loading of web images:

1. First of all, briefly describe the JS file of the 3 kinds of lazy loading mode:

(1) <script type= "Text/javascript" Defer>,defer property can defer the interpretation of the script until the document has been displayed to the user, but only IE supports the defer attribute

(2) Set the specific delay time, the corresponding JS code is as follows:

function Loadscript () {    var myscript=document.createelement ("script");    Myscript.src= "Dafu.js";    Document.body.appendChild (MyScript);            } SetTimeout (function() {    loadscript ();     },1000)

(3) The use of JS monitoring, until the document loading will not load the specified external JS file, the corresponding JS code is as follows:

if (window.addeventlistener) {    Window.addeventlistener (false);} Else if (window.attachevent) {    window.attachevent ("onload", Loadscript);        } Else {    = loadscript;}    

2. Next to the picture delay loading, say about the two good plugins you have used:

(1) based on the jquery class library Jquery.lazyload.js (1.9+), nonsense said, directly on the code, first on the layout:

<Divclass= "Demo"style= "WIDTH:736PX; margin:1000px auto;">    <imgclass= "lazy"src= "Images/blank.gif"data-original= "Images/big-1.jpg">    <imgclass= "lazy"src= "Images/blank.gif"data-original= "Images/big-2.jpg">    <imgclass= "lazy"src= "Images/blank.gif"data-original= "Images/big-3.jpg">    <imgclass= "lazy"src= "Images/blank.gif"data-original= "Images/big-4.jpg">    <imgclass= "lazy"src= "Images/blank.gif"data-original= "Images/big-5.jpg">    <imgclass= "lazy"src= "Images/blank.gif"data-original= "Images/big-6.jpg">    <imgclass= "lazy"src= "Images/blank.gif"data-original= "Images/big-7.jpg"></Div>

Notice that the CSS style inside I was given. demo img {width:100%; height:490px;}, so adding the width and Height properties to a picture helps fill the space needed when the picture is not loaded, and in the SRC attribute, set the placeholder picture, For example, a 1x1 pixel gray picture or loading gift, and then set the real image URL in data-original, of course, SRC set the trouble can go to the instantiation of the parameter set to write.

Then there is the JS part of the code:

$ ("img"). Lazyload ({placeholder:"Images/loading.gif",//set a placeholder image, when the image is loaded, the bitmap will be hidden, priority call in the tag row attribute src corresponding to the bitmapData_attribute: "Original",//the Data property suffix of the real image address, which defaults to originalEffect: "FadeIn",//the Show () method is used by default to display the diagram, and other effects (Fadein,slidedown) can be used to handleTHRESHOLD:40,//The default slice will appear on the screen when loaded, threshold can make the picture in the distance from the screen how many pixels before loading, so that users do not noticeEFFECTSPEED:500,//the use of parameters as effect represents the animation time, which defaults to undefined//Event: "Click",//is waiting by default until the user scrolls to the location of the window slice to begin loading the picture, which can be set to an event trigger load (click), mouseover (mouse over), sporty (motion), Foobar (...))//Container: $ ("#container"),//default when pulling the browser scroll bar, where you can use the plugin on the picture of a scrollable containerFailure_limit:10,//By default, when you find the first picture that is not in the visible area, it will not continue to load, but when the HTML container is cluttered with images that are not loaded in the visible area, Failurelimit is intended to load images outside of the visible area to avoid this problem//Skip_invisible:false//The hidden image is ignored by default. Set Skip_invisible to False to load hidden pictures//Image Load Event (Function), there are 2 parameters: Elements_left (number of pictures not loaded), settings (lazyload parameters)Appearfunction(num,setting) {Console.log ("+num+" is not loaded at the beginning.)      },//Image Loaded Event (Function), with 2 parameters, with appearLoadfunction(num,setting) {Console.log ("And then there's" +num+ "Not Loaded")    }}); //images in the specified area are automatically loaded after the page has been loaded for 5 seconds$ (window). On ("Load",function() {setTimeout (function() {$ ("img"). Trigger ("click")}, 5000);});//listen to each picture loading complete$ ("img"). ON ("Load",function() {Console.log ("The subscript for this picture just Loaded is" +$ ( This). index ());}) 

Most of the functions can be realized, the feeling is not very good is not directly to the picture set explicit delay loading time, detailed introduction please http://code.ciaoca.com/jquery/lazyload/.

(2) Lightweight plug-in echo.js, out of the jquery class library, but also directly set the explicit delay load time, the HTML part of the code and there are some similar:

<Divclass= "Demo"style= "WIDTH:736PX; margin:1000px auto;">    <imgclass= "lazy"src= "Images/blank.gif"Data-echo= "Images/big-1.jpg">    <imgclass= "lazy"src= "Images/blank.gif"Data-echo= "Images/big-2.jpg">    <imgclass= "lazy"src= "Images/blank.gif"Data-echo= "Images/big-3.jpg">    <imgclass= "lazy"src= "Images/blank.gif"Data-echo= "Images/big-4.jpg">    <imgclass= "lazy"src= "Images/blank.gif"Data-echo= "Images/big-5.jpg">    <imgclass= "lazy"src= "Images/blank.gif"Data-echo= "Images/big-6.jpg">    <imgclass= "lazy"src= "Images/blank.gif"Data-echo= "Images/big-7.jpg"></Div>

Note: If you customize a placeholder image directly, it may cause distortion of the picture, etc., you can prepare a 1*1px transparent GIF picture (blank.gif), and then use a loading picture as the background, that is. demo img {width:100%; height: 490px; Background:url (images/loading.gif) no-repeat 50%;}

Then directly on the JS section of the Code:

//Instantiate Echoecho.init ({offset:0,//set the left and right distance viewport to how much to start loading pictures, the default is 0, that is, only load the picture that appears in the visual area, the larger the parameter value, the more pictures will be loaded//offsetvertical:40,//Vertical Distance viewport how much to start loading the picture, the default value is 0//offsethorizontal:0,//Horizontal Distance viewport how much to start loading the picture, the default value is 0//offsettop:0,//top direction distance viewport how much to start loading the picture, the default value is Offsetvertical//offsetbutton:0,///Bottom direction distance viewport how much to start loading the picture, the default value is Offsetvertical//offsetleft:0,////left direction distance viewport how much to start loading pictures, default value is Offsethorizontal//offsetright:0,///right-hand distance viewport how much to start loading the picture, the default value is Ooffsethorizontalthrottle:1000,//Set Picture delay load TimeCallbackfunction(element, op) {if(OP = = = ' Load ') {Element.classList.add (' Loaded '); } Else{element.classList.remove (' Loaded '); } console.log (Element,' has been ', op + ' ed ')//passing updated elements and operations (load or unload)}, Unload:false//The default is False, which means that images that have already been loaded are not loaded when the picture is sliding beyond viewport});//listen to each picture loading complete$ ("img"). ON ("Load",function() {Console.log ($ ( This). index ());})

The main functions have been tested, no obvious problems, there is a Echo.reader () method is not how to use, interested in code friends can go to try ~

Delay loading external JS files, delay loading pictures (jquery.lazyload.js and Echo,js)