预加载
方法一：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 };
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>