预加载
方法一：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/echo-js@1.7.3/src/echo.min.js"></script> 82 <script> 83 echo.init(); 84 </script> 85 86 </html>