Home > Developer > JavaScript
The general implementation method is:
Before the load of the page is not triggered, put the img in all the elements of the specified id into imgs, and put the src values of all the images into a new _ src attribute, set src to the specified display image.
Then, in document. when the scroll event of the body is triggered, it cyclically calculates whether the position of the img element in imgs is within the display box of the browser. If yes, the value of the _ src attribute of the img element is assigned to src, in this way, the image is displayed.
The trouble here is how to calculate the img location and obtain the absolute position of the element relative to the page. Usually offsetLeft and offsetTop are used, but these two attributes are the relative positions of the elements that the offsetParent points to. If the offsetParent points to an element that is floating or absolute positioning, so it is incorrect to obtain the absolute position through offsetLeft.
Here, I sum the offsetTop of all the parent elements of the element to obtain the absolute position of the document.
Copy codeThe Code is as follows:
// Take the absolute X position of the element's page
Var getLeft = function (El ){
Var left = 0;
Do {
Left + = El. offsetLeft;
} While (El = El. offsetParent). nodeName! = 'Body ');
Return left;
};
// Take the absolute Y position of the element's page
Var getTop = function (El ){
Var top = 0;
Do {
Top + = El. offsetTop;
} While (El = El. offsetParent). nodeName! = 'Body ');
Return top;
};
When setting a scrollevent in the window, ieuses document.doc umentElement, while other browsers use document.
The following code calculates the position of the document in the browser display window.
Copy codeThe Code is as follows:
// Read the position of the scroll bar and the display size of the browser window.
Var top = isGoo? Document. body. scrollTop: document.doc umentElement. scrollTop,
Left = isGoo? Document. body. scrollLeft: document.doc umentElement. scrollLeft,
Width = document.doc umentElement. clientWidth,
Height = document.doc umentElement. clientHeight;
Google Chrome uses the body to obtain scrollTop, while other browsers use documentElement.
The final iteration determines the position of the img and displays the image
Copy codeThe Code is as follows:
// Batch determine whether all images are in the browser display area
For (var I = 0; I Var _ top = getTop (imgs [I]), _ left = getLeft (imgs [I]);
// Determine whether the image is in the display area
If (_ top> = top &&
_ Left> = left &&
_ Top <= top + height &&
_ Left <= left + width ){
Var _ src = imgs [I]. getAttribute ('_ src ');
// If the image is already displayed, cancel the assignment.
If (imgs [I]. src! ==_Src ){
Imgs [I]. src = _ src;
}
}
}
Code that can be run
Copy codeThe Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html>
<Head>
<Title> delayed loading of js images </title>
</Head>
<Body>
<Table id = "out1" style = "height: 2450px;">
<Tr>
<Td> </td>
<Td> </td>
</Tr>
<Tr>
<Td> </td>
<Td> </td>
</Tr>
<Tr>
<Td> </td>
<Td> </td>
</Tr>
<Tr>
<Td> </td>
<Td> </td>
</Tr>
<Tr>
<Td> </td>
<Td> </td>
</Tr>
<Tr>
<Td> </td>
<Td> </td>
</Tr>
<Tr>
<Td> </td>
<Td> </td>
</Tr>
<Tr>
<Td> </td>
<Td> </td>
</Tr>
<Tr>
<Td> </td>
<Td> </td>
</Tr>
<Tr>
<Td> </td>
<Td> </td>
</Tr>
<Tr>
<Td> </td>
<Td> </td>
</Tr>
<Tr>
<Td> </td>
<Td> </td>
</Tr>
</Table>
<Table id = "out2" style = "width: 4883px">
<Tr>
<Td> </td>
<Td> </td>
<Td> </td>
<Td> </td>
<Td> </td>
<Td> </td>
<Td> </td>
<Td> </td>
<Td> </td>
<Td> </td>
<Td> </td>
<Td> </td>
<Td> </td>
<Td> </td>
<Td> </td>
<Td> </td>
<Td> </td>
<Td> </td>
<Td> </td>
<Td> </td>
<Td> </td>
<Td> </td>
<Td> </td>
<Td> </td>
</Tr>
</Table>
</Body>
</Html>
<Script type = "text/javascript">
Function delayload (option ){
// Read Parameters
// The image displayed when the image is not loaded
Var src = option. src? Option. src :'',
// Specify the img elements under those IDs for delayed display
Id = option. id? Option. id: [];
// Image list
Var imgs = [];
// Obtain all image elements
For (var I = 0; I <id. length; I ++ ){
Var idbox = document. getElementById (id [I]), _ imgs;
If (idbox & (_ imgs = idbox. getElementsByTagName ('img '))){
For (var t = 0; t <_ imgs. length; t ++ ){
Imgs. push (_ imgs [t]);
}
}
}
// Set all images to the specified loading Image
For (var I = 0; I // Put the original image path in _ src
Imgs [I]. setAttribute ('_ src', imgs [I]. src );
Imgs [I]. src = src;
}
// Take the absolute X position of the element's page
Var getLeft = function (El ){
Var left = 0;
Do {
Left + = El. offsetLeft;
} While (El = El. offsetParent). nodeName! = 'Body ');
Return left;
};
// Take the absolute Y position of the element's page
Var getTop = function (El ){
Var top = 0;
Do {
Top + = El. offsetTop;
} While (El = El. offsetParent). nodeName! = 'Body ');
Return top;
};
// Check whether it is ie and read the ie version
Var isIE = !! Navigator. userAgent. match (/MSIE \ B \ s * ([0-9] \. [0-9]);/img );
IsIE & (isIE = RegExp. $1 );
// Whether it is chrome
Var isGoo = !! Navigator. userAgent. match (/AppleWebKit \ B/img );
// Obtain the object that can trigger the scroll event
Var box = isIE? Document.doc umentElement: document;
// Scroll event of the body element
Var onscroll = box. onscroll = function (){
// Read the position of the scroll bar and the display size of the browser window.
Var top = isGoo? Document. body. scrollTop: document.doc umentElement. scrollTop,
Left = isGoo? Document. body. scrollLeft: document.doc umentElement. scrollLeft,
Width = document.doc umentElement. clientWidth,
Height = document.doc umentElement. clientHeight;
// Batch determine whether all images are in the browser display area
For (var I = 0; I Var _ top = getTop (imgs [I]), _ left = getLeft (imgs [I]);
// Determine whether the image is in the display area
If (_ top> = top &&
_ Left> = left &&
_ Top <= top + height &&
_ Left <= left + width ){
Var _ src = imgs [I]. getAttribute ('_ src ');
// If the image is already displayed, cancel the assignment.
If (imgs [I]. src! ==_Src ){
Imgs [I]. src = _ src;
}
}
}
};
Var load = new Image ();
Load. src = src;
Load. onload = function (){
Onscroll ();
};
}
Delayload ({id: ['out1', 'out2'], src: 'http: // files.jb51.net/file_images/article/201307/2013072210300234.jpg '});
</Script>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
