页面图片预加载与懒加载

预加载

方法一：CSS实现预加载

1 #preload-01 { background: url(http://domain.tld/image-01.png) no-repeat -9999px -9999px; }
2 #preload-02 { background: url(http://domain.tld/image-02.png) no-repeat -9999px -9999px; }
3 #preload-03 { background: url(http://domain.tld/image-03.png) no-repeat -9999px -9999px;

方法二：JavaScript实现预加载

 1 function preloader() {
 2     if (document.images) {
 3         var img1 = new Image();
 4         var img2 = new Image();
 5         var img3 = new Image();
 6         img1.src = "http://domain.tld/path/to/image-001.gif";
 7         img2.src = "http://domain.tld/path/to/image-002.gif";
 8         img3.src = "http://domain.tld/path/to/image-003.gif";
 9     }
10 }
11 function addLoadEvent(func) {
12     var oldonload = window.onload;
13     if (typeof window.onload != 'function') {
14         window.onload = func;
15     } else {
16         window.onload = function() {
17             if (oldonload) {
18                 oldonload();
19             }
20             func();
21         }
22     }
23 }
24 addLoadEvent(preloader);

方法三：使用定时器实现预加载

1 window.onload = function() {
2     setTimeout(function() {
3      　　new Image().src = "http://domain.tld/preload.png";
4     }, 0);
5 };

懒加载

echo.js

 1 <!DOCTYPE html>
 2 <html lang="zh-CN">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>echo.js实现懒加载</title>
 9 </head>
10 
11 <body>
12     <main>
13         <article>
14 
15             <h1>Echo.js Demo</h1>
16 
17             <p><a href="https://github.com/toddmotto/echo">Echo.js</a> is a standalone JavaScript lazy-loading image
18                 tool, by <a href="https://twitter.com/toddmotto">Todd Motto</a>. Echo is fast, less than 1KB and uses
19                 HTML5 data-* attributes. Echo works in IE8+.</p>
20 
21             <p>Test data from the <a href="http://www.dota2.com/heroes/">Dota 2 Heroes</a> page.</p>
22 
23             <h2>Dragon Knight</h2>
24 
25             <img src="http://static.ak.fbcdn.net/images/blank.gif" alt="Dragon Knight"
26                 data-echo="http://cdn.dota2.com/apps/dota2/images/heroes/dragon_knight_vert.jpg">
27 
28             <p>After years on the trail of a legendary Eldwurm, the Knight Davion found himself facing a disappointing
29                 foe: the dreaded Slyrak had grown ancient and frail, its wings tattered, its few remaining scales
30                 stricken with scale-rot, its fangs ground to
31                 nubs, and its fire-gouts no more threatening than a pack of wet matchsticks. Seeing no honor to be
32                 gained in dragon-murder, Knight Davion prepared to turn away and leave his old foe to die in peace. But
33                 a voice crept into his thoughts, and Slyrak
34                 gave a whispered plea that Davion might honor him with death in combat. Davion agreed, and found himself
35                 rewarded beyond expectation for his act of mercy: As he sank his blade in Slyrak's breast, the dragon
36                 pierced Davion's throat with a talon.
37                 As their blood mingled, Slyrak sent his power out along the Blood Route, sending all its strength and
38                 centuries of wisdom to the knight. The dragon's death sealed their bond and Dragon Knight was born. The
39                 ancient power slumbers in the Dragon Knight
40                 Davion, waking when he calls it. Or perhaps it is the Dragon that calls the Knight...</p>
41 
42             <h2>Crystal Maiden</h2>
43 
44             <img src="http://static.ak.fbcdn.net/images/blank.gif" alt="Crystal Maiden"
45                 data-echo="http://cdn.dota2.com/apps/dota2/images/heroes/crystal_maiden_vert.jpg">
46 
47             <p>Born in a temperate realm, raised with her fiery older sister Lina, Rylai the Crystal Maiden soon found
48                 that her innate elemental affinity to ice created trouble for all those around her. Wellsprings and
49                 mountain rivers froze in moments if she stopped
50                 to rest nearby; ripening crops were bitten by frost, and fruiting orchards turned to mazes of ice and
51                 came crashing down, spoiled. When their exasperated parents packed Lina off to the equator, Rylai found
52                 herself banished to the cold northern realm
53                 of Icewrack, where she was taken in by an Ice Wizard who had carved himself a hermitage at the crown of
54                 the Blueheart Glacier. After long study, the wizard pronounced her ready for solitary practice and left
55                 her to take his place, descending into
56                 the glacier to hibernate for a thousand years. Her mastery of the Frozen Arts has only deepened since
57                 that time, and now her skills are unmatched.</p>
58 
59             <h2>Bloodseeker</h2>
60 
61             <img src="http://static.ak.fbcdn.net/images/blank.gif" alt="Bloodseeker"
62                 data-echo="http://cdn.dota2.com/apps/dota2/images/heroes/bloodseeker_vert.jpg">
63 
64             <p>Strygwyr the Bloodseeker is a ritually sanctioned hunter, Hound of th e Flayed Twins, sent down from the
65                 mist-shrouded peaks of Xhacatocatl in search of blood. The Flayed Ones require oceanic amounts of blood
66                 to keep them sated and placated, and would
67                 soon drain their mountain empire of its populace if the priests of the high plateaus did not appease
68                 them. Strygwyr therefore goes out in search of carnage. The vital energy of any blood he lets, flows
69                 immediately to the Twins through the sacred
70                 markings on his weapons and armor. Over the years, he has come to embody the energy of a vicious hound;
71                 in battle he is savage as a jackal. Beneath the Mask of the Bloodseeker, in the rush of bloody
72                 quenching, it is said that you can sometime see
73                 the features of the Flayers taking direct possession of their Hound.
74             </p>
75 
76         </article>
77 
78     </main>
79 
80 </body>
81 <script src="https://cdn.jsdelivr.net/npm/[email protected]/src/echo.min.js"></script>
82 <script>
83     echo.init();
84 </script>
85 
86 </html>

预加载

方法一：CSS实现预加载

1 #preload-01 { background: url(http://domain.tld/image-01.png) no-repeat -9999px -9999px; }
2 #preload-02 { background: url(http://domain.tld/image-02.png) no-repeat -9999px -9999px; }
3 #preload-03 { background: url(http://domain.tld/image-03.png) no-repeat -9999px -9999px;

方法二：JavaScript实现预加载

 1 function preloader() {
 2     if (document.images) {
 3         var img1 = new Image();
 4         var img2 = new Image();
 5         var img3 = new Image();
 6         img1.src = "http://domain.tld/path/to/image-001.gif";
 7         img2.src = "http://domain.tld/path/to/image-002.gif";
 8         img3.src = "http://domain.tld/path/to/image-003.gif";
 9     }
10 }
11 function addLoadEvent(func) {
12     var oldonload = window.onload;
13     if (typeof window.onload != 'function') {
14         window.onload = func;
15     } else {
16         window.onload = function() {
17             if (oldonload) {
18                 oldonload();
19             }
20             func();
21         }
22     }
23 }
24 addLoadEvent(preloader);

方法三：使用定时器实现预加载

1 window.onload = function() {
2     setTimeout(function() {
3      　　new Image().src = "http://domain.tld/preload.png";
4     }, 0);
5 };

页面图片预加载与懒加载

猜你喜欢