Initial use of lazy load plug-ins

Keywords: JQuery Javascript 





    

  1. <!DOCTYPE html>
    2. 

  2. 

    

    <html>
    

    3. 

  3. 

    

    	<head>

    

    4. 

  4. 

    

    		<meta charset="utf-8" />

    

    5. 

  5. 

    

    		<title>Picture Lazy Loading</title>

    

    6. 

  6. 

    

    		<style type="text/css">

    

    7. 

  7. 

    

    			.Demo{width: 1000px;margin: 50px auto;}
    

    8. 

  8. 

    

    			.Demo>div{display: inline-block;width: 485px;height: 400px;margin-right: 25px;margin-bottom: 25px;}
    

    9. 

  9. 

    

    			.Demo>div:nth-child(2n){margin-right: 0;}
    

    10. 

  10. 

    

    			.Demo>div>img{width: 100%;height: 100%;}
    

    11. 

  11. 

    

    		</style>

    

    12. 

  12. 

    

    	</head>

    

    13. 

  13. 

    

    	<body>

    

    14. 

  14. 

    

    		<div class="Demo">

    

    15. 

  15. 

    

    			<div>

    

    16. 

  16. 

    

    				<img src="img/timg.gif" data-original="img/1.jpg" class="lazy"/>

    

    17. 

  17. 

    

    			</div>

    

    18. 

  18. 

    

    			<div>

    

    19. 

  19. 

    

    				<img src="img/timg.gif" data-original="img/2.jpg" class="lazy"/>

    

    20. 

  20. 

    

    			</div>

    

    21. 

  21. 

    

    			<div>

    

    22. 

  22. 

    

    				<img src="img/timg.gif" data-original="img/3.jpg" class="lazy"/>

    

    23. 

  23. 

    

    			</div>

    

    24. 

  24. 

    

    			<div>

    

    25. 

  25. 

    

    				<img src="img/timg.gif" data-original="img/4.jpg" class="lazy"/>

    

    26. 

  26. 

    

    			</div>

    

    27. 

  27. 

    

    			<div>

    

    28. 

  28. 

    

    				<img src="img/timg.gif" data-original="img/5.jpg" class="lazy"/>

    

    29. 

  29. 

    

    			</div>

    

    30. 

  30. 

    

    			<div>

    

    31. 

  31. 

    

    				<img src="img/timg.gif" data-original="img/6.jpg" class="lazy"/>

    

    32. 

  32. 

    

    			</div>

    

    33. 

  33. 

    

    			<div>

    

    34. 

  34. 

    

    				<img src="img/timg.gif" data-original="img/7.jpg" class="lazy"/>

    

    35. 

  35. 

    

    			</div>

    

    36. 

  36. 

    

    			<div>

    

    37. 

  37. 

    

    				<img src="img/timg.gif" data-original="img/8.jpg" class="lazy"/>

    

    38. 

  38. 

    

    			</div>

    

    39. 

  39. 

    

    			<div>

    

    40. 

  40. 

    

    				<img src="img/timg.gif" data-original="img/9.jpg" class="lazy"/>

    

    41. 

  41. 

    

    			</div>

    

    42. 

  42. 

    

    			<div>

    

    43. 

  43. 

    

    				<img src="img/timg.gif" data-original="img/10.jpg" class="lazy"/>

    

    44. 

  44. 

    

    			</div>

    

    45. 

  45. 

    

    			<div>

    

    46. 

  46. 

    

    				<img src="img/timg.gif" data-original="img/11.jpg" class="lazy"/>

    

    47. 

  47. 

    

    			</div>

    

    48. 

  48. 

    

    			<div>

    

    49. 

  49. 

    

    				<img src="img/timg.gif" data-original="img/12.jpg" class="lazy"/>

    

    50. 

  50. 

    

    			</div>

    

    51. 

  51. 

    

    			<div>

    

    52. 

  52. 

    

    				<img src="img/timg.gif" data-original="img/13.jpg" class="lazy"/>

    

    53. 

  53. 

    

    			</div>

    

    54. 

  54. 

    

    			<div>

    

    55. 

  55. 

    

    				<img src="img/timg.gif" data-original="img/1.jpg" class="lazy"/>

    

    56. 

  56. 

    

    			</div>

    

    57. 

  57. 

    

    			<div>

    

    58. 

  58. 

    

    				<img src="img/timg.gif" data-original="img/2.jpg" class="lazy"/>

    

    59. 

  59. 

    

    			</div>

    

    60. 

  60. 

    

    			<div>

    

    61. 

  61. 

    

    				<img src="img/timg.gif" data-original="img/999.jpg" class="lazy"/>

    

    62. 

  62. 

    

    			</div>

    

    63. 

  63. 

    

    		</div>

    

    64. 

  64. 

    

    		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

    

    65. 

  65. 

    

    		<script src="https://cdn.bootcss.com/jquery_lazyload/1.9.7/jquery.lazyload.min.js"></script>

    

    66. 

  66. 

    

    		<script type="text/javascript">

    

    67. 

  67. 

    

    			$(function(){
    

    68. 

  68. 

    

    				$(".lazy").lazyload({effect:"fadeIn",threshold:5});
    

    69. 

  69. 

    

    			});
    

    70. 

  70. 

    

    		</script>

    

    71. 

  71. 

    

    	</body>

    

    72. 

  72. 

    

    </html>
    

    73. 



Parameter setting


$(".xxx").lazyload({
placeholder : "img/grey.gif", //Use pictures to occupy space ahead of time
// Placement holder, the value of which is an image path. This image is used to occupy the position of the image to be loaded. When the image is loaded, the placeholder is hidden.
effect: "fadeIn", // What is the effect of loading
// Effect (special effects), values show (direct display), fadeIn (fade in), slideDown (drop-down), etc., commonly used fadeIn
threshold: 200, // Start loading ahead of time
// threshold, the value is a number, representing the height of the page. If set to 200, it means that the scrollbar starts loading pictures when it is still 200 height away from the target position, so that users can not be aware of it.
event: 'click', // Load only when event triggers
// event, with click, mouseover, sporty, foobar(... ) The last two values are not tested.
container: $("#Container", // Implement the effect of the image in a container
// The value of container is a container. lazyload takes effect by default when the browser scrollbar is pulled. This parameter allows you to load the pictures in turn when pulling the scrollbar of a DIV.
failurelimit : 10 // When Picture Sorting is Chaotic
// failurelimit, the value is a number. lazyload defaults to continue loading when it finds the first image that is not in the visible area, but when the HTML container is confused, there may be images in the visible area that are not loaded. failurelimit is intended to load N pictures outside the visible area to avoid this problem.
});






    

  1. <!DOCTYPE html>
    2. 

  2. 

    

    <html>
    

    3. 

  3. 

    

    	<head>

    

    4. 

  4. 

    

    		<meta charset="utf-8" />

    

    5. 

  5. 

    

    		< title > Image lazy loading </title >

    

    6. 

  6. 

    

    		<style type="text/css">

    

    7. 

  7. 

    

    			.Demo{width: 1000px;margin: 50px auto;}
    

    8. 

  8. 

    

    			.Demo>div{display: inline-block;width: 485px;height: 400px;margin-right: 25px;margin-bottom: 25px;}
    

    9. 

  9. 

    

    			.Demo>div:nth-child(2n){margin-right: 0;}
    

    10. 

  10. 

    

    			.Demo>div>img{width: 100%;height: 100%;}
    

    11. 

  11. 

    

    		</style>

    

    12. 

  12. 

    

    	</head>

    

    13. 

  13. 

    

    	<body>

    

    14. 

  14. 

    

    		<div class="Demo">

    

    15. 

  15. 

    

    			<div>

    

    16. 

  16. 

    

    				<img src="img/timg.gif" data-original="img/1.jpg" class="lazy"/>

    

    17. 

  17. 

    

    			</div>

    

    18. 

  18. 

    

    			<div>

    

    19. 

  19. 

    

    				<img src="img/timg.gif" data-original="img/2.jpg" class="lazy"/>

    

    20. 

  20. 

    

    			</div>

    

    21. 

  21. 

    

    			<div>

    

    22. 

  22. 

    

    				<img src="img/timg.gif" data-original="img/3.jpg" class="lazy"/>

    

    23. 

  23. 

    

    			</div>

    

    24. 

  24. 

    

    			<div>

    

    25. 

  25. 

    

    				<img src="img/timg.gif" data-original="img/4.jpg" class="lazy"/>

    

    26. 

  26. 

    

    			</div>

    

    27. 

  27. 

    

    			<div>

    

    28. 

  28. 

    

    				<img src="img/timg.gif" data-original="img/5.jpg" class="lazy"/>

    

    29. 

  29. 

    

    			</div>

    

    30. 

  30. 

    

    			<div>

    

    31. 

  31. 

    

    				<img src="img/timg.gif" data-original="img/6.jpg" class="lazy"/>

    

    32. 

  32. 

    

    			</div>

    

    33. 

  33. 

    

    			<div>

    

    34. 

  34. 

    

    				<img src="img/timg.gif" data-original="img/7.jpg" class="lazy"/>

    

    35. 

  35. 

    

    			</div>

    

    36. 

  36. 

    

    			<div>

    

    37. 

  37. 

    

    				<img src="img/timg.gif" data-original="img/8.jpg" class="lazy"/>

    

    38. 

  38. 

    

    			</div>

    

    39. 

  39. 

    

    			<div>

    

    40. 

  40. 

    

    				<img src="img/timg.gif" data-original="img/9.jpg" class="lazy"/>

    

    41. 

  41. 

    

    			</div>

    

    42. 

  42. 

    

    			<div>

    

    43. 

  43. 

    

    				<img src="img/timg.gif" data-original="img/10.jpg" class="lazy"/>

    

    44. 

  44. 

    

    			</div>

    

    45. 

  45. 

    

    			<div>

    

    46. 

  46. 

    

    				<img src="img/timg.gif" data-original="img/11.jpg" class="lazy"/>

    

    47. 

  47. 

    

    			</div>

    

    48. 

  48. 

    

    			<div>

    

    49. 

  49. 

    

    				<img src="img/timg.gif" data-original="img/12.jpg" class="lazy"/>

    

    50. 

  50. 

    

    			</div>

    

    51. 

  51. 

    

    			<div>

    

    52. 

  52. 

    

    				<img src="img/timg.gif" data-original="img/13.jpg" class="lazy"/>

    

    53. 

  53. 

    

    			</div>

    

    54. 

  54. 

    

    			<div>

    

    55. 

  55. 

    

    				<img src="img/timg.gif" data-original="img/1.jpg" class="lazy"/>

    

    56. 

  56. 

    

    			</div>

    

    57. 

  57. 

    

    			<div>

    

    58. 

  58. 

    

    				<img src="img/timg.gif" data-original="img/2.jpg" class="lazy"/>

    

    59. 

  59. 

    

    			</div>

    

    60. 

  60. 

    

    			<div>

    

    61. 

  61. 

    

    				<img src="img/timg.gif" data-original="img/999.jpg" class="lazy"/>

    

    62. 

  62. 

    

    			</div>

    

    63. 

  63. 

    

    		</div>

    

    64. 

  64. 

    

    		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

    

    65. 

  65. 

    

    		<script src="https://cdn.bootcss.com/jquery_lazyload/1.9.7/jquery.lazyload.min.js"></script>

    

    66. 

  66. 

    

    		<script type="text/javascript">

    

    67. 

  67. 

    

    			$(function(){
    

    68. 

  68. 

    

    				$(".lazy").lazyload({effect:"fadeIn",threshold:5});
    

    69. 

  69. 

    

    			});
    

    70. 

  70. 

    

    		</script>

    

    71. 

  71. 

    

    	</body>

    

    72. 

  72. 

    

    </html>
    

    73. 



Parameter setting


$(".xxx").lazyload({
Placement holder: "img/grey.gif", // preoccupy with pictures
// Placement holder, the value of which is an image path. This image is used to occupy the position of the image to be loaded. When the image is loaded, the placeholder is hidden.
Effect:'fadeIn', // What effect is the load using?
// Effect (special effects), values show (direct display), fadeIn (fade in), slideDown (drop-down), etc., commonly used fadeIn
threshold: 200, // start loading ahead of time
// threshold, the value is a number, representing the height of the page. If set to 200, it means that the scrollbar starts loading pictures when it is still 200 height away from the target position, so that users can not be aware of it.
Event:'click', // loads only when the event triggers
// event, with click, mouseover, sporty, foobar(... ) The last two values are not tested.
container: $("#container"), // / Implementing effects on images in a container
// The value of container is a container. lazyload takes effect by default when the browser scrollbar is pulled. This parameter allows you to load the pictures in turn when pulling the scrollbar of a DIV.
Failurelimit: 10 // When Picture Sorting is Chaotic
// failurelimit, the value is a number. lazyload defaults to continue loading when it finds the first image that is not in the visible area, but when the HTML container is confused, there may be images in the visible area that are not loaded. failurelimit is intended to load N pictures outside the visible area to avoid this problem.
});


            


        
    

    
Posted by maxpup979 on Sat, 18 May 2019 15:04:49 -0700


    
        

            
Hot Keywords


                                    

                                

    



    ©2024 Programmer Group