Home > Industries > E-commerce
Lazyload is a common method for websites to reduce the number of requests sent to the server during page loading, here is a plug-in for loading images in most cases (such as iPad browsing, asynchronous loading, and loading within a certain range.
Code and Effects
Post Code first:
$. Extend ({imgload: function (options) {Options = $. extend ({container: "IMG", // set time: 600, // timed refreshing time attribute: "src2" // Save the custom attribute of the source image address }, options); var Container = options. container, n = n | 0, Tim, _ time = 0; load (); function getheight () {var d = Document, y = (navigator. useragent. tolowercase (). match (/iPad/I) = "iPad ")? Window. pageyoffset: math.max(d.doc umentelement. scrolltop, D. body. scrolltop); Return d.doc umentelement. clientheight + Y-N;} function load () {var Hg = getheight (); $ (container ). each (function () {VaR _ s2 = $ (this ). ATTR (options. attribute), t = $ (this ). offset (). top; If (_ s2 & T <Hg & T> Hg-1000) {$ (this ). ATTR ("src", _ s2 ). removeattr (options. attribute) };}}; if (!! Window. activexobject &&! Window. XMLHttpRequest) {_ time = options. time} $ (window ). scroll (function () {cleartimeout (Tim); Tim = setTimeout (function () {load () ;}, options. time );});}})
Click here to view the effect
Parameter description
Parameter container: Container indicates the container to be traversed. The default value is IMG, which is to traverse all IMG of the entire page. You can modify this parameter to load images within a certain range in a delayed manner. If you want to asynchronously upload images in UL, you only need to set the value of the container parameter ". imgcontainer Li IMG.
<Script type="javascript/text"> $(function(){ $.imgLoad({ container: ".imgContainer li img"}); })</Script> <ul class="imgContainer"> <li> </li> <li> </li> <li> </li> </ul>
Parameter time: The time parameter indicates the delay loading time. The default value is 600 milliseconds. That is to say, when the page is scrolled to this range, the image will be displayed after 0.6 seconds. Set the time to 1 second:
<Script type="javascript/text">$(function(){ $.imgLoad({"time":1000 });})</Script>
Attribute: This parameter is used to store the image path. Before setting the src attribute for an image, the actual image path must exist in a certain attribute. The default value is src2. You can set this attribute to any one:
<Script type="javascript/text"> $(function(){ $.imgLoad({ attribute: "myAttr"}); })</Script><body> </body>
The basic parameters have been completed, and the call is quite simple. There is another problem here, because the delayed loading method is written in the page rolling event, that is, in the code
$(window).scroll(function () { clearTimeout(tim); tim = setTimeout(function () { Load(); }, options.time); });
If you refresh the page directly, the browser will jump to the current position, but some Browsers Do not trigger the scroll event. In this case, the solution is to use the scrolltop method after the page is loaded, let the browser go up to 1 pixel:
jQuery(window).scrollTop(1)
As a result, this plug-in is simple and practical compared with some plug-ins on the Internet. You are welcome to discuss it.
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
