[js] 预加载
#
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title></title> <style> html, body, ul, li { margin: 0; padding: 0; border: 0; list-style: none; } .loadingMain { height: 200px; background: lightcoral; width: 100%; } .loadingBar { height: 200px; width: 10%; background: lightblue; } </style> </head> <body> <div class="loadingMain"> <div class="loadingBar"> 0 </div> </div> <script> var sources = [ 'http://p2.qhimg.com/t01ed1438874f940dc0.jpg', 'http://p9.qhimg.com/t01b4ff03b72c7dc6c7.jpg', 'http://p2.qhimg.com/t01dd90dfbec92074d0.jpg', 'http://p7.qhimg.com/t01cfec6d87cde457c5.jpg', 'http://p9.qhimg.com/t01943ced462da67833.jpg', 'http://p0.qhimg.com/t01943ced462da67833.jpg', 'http://p6.qhimg.com/t01aa15a7ba7ccb49a7.jpg', 'http://p8.qhimg.com/t010f1e8badf1134376.jpg', 'http://p8.qhimg.com/t01cf37ea915533a032.jpg', 'http://p3.qhimg.com/t0193d8a3963e1803e9.jpg', 'http://p3.qhimg.com/t01cd6a4d4b4bd4457b.jpg' ]; var QM = {}; (function($) { var count = 0; $.detect_loading = function(sources) { var l = sources.length; for (var i = 0; i < l; i++) { var dom = document.createElement('img'); dom.src = sources[i]; dom.onload = function() { detection(l); } dom.onerror = function() { detection(l); } } } function detection(l) { ++count; var percent = Math.floor(count / l * 100) + '%'; document.querySelector(".loadingBar").style.width = percent; document.querySelector(".loadingBar").innerHTML = percent; if (count == l) { document.querySelector(".loadingMain").style.display = 'none'; } } return $; })(QM); QM.detect_loading(sources); var a =document.createElement('script'); var b =document.createElement('link'); var c =document.createElement('audio'); var d =document.createElement('img'); a.src ='http://zongbu.game.leju.com/zhuanti/201603/lejumaifang/js/main.min.js'; b.href = 'http://zongbu.game.leju.com/zhuanti/201603/lejumaifang/styles/styles.css'; c.src = 'http://zongbu.game.leju.com/zhuanti/201603/lejumaifang/mp3/kbps.mp3'; d.src = 'http://zongbu.game.leju.com/zhuanti/201603/lejumaifang/images/t_1.jpg'; a.chatset = 'utf-8'; console.log(a); console.log(b); console.log(c); console.log(d); document.body.appendChild(a); document.body.appendChild(b); document.body.appendChild(c); document.body.appendChild(d); </script> </body> </html>
#
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title></title> <style> html, body, ul, li { margin: 0; padding: 0; border: 0; list-style: none; } .loadingMain { position: fixed; top: 0; height: 200px; background: lightcoral; width: 100%; } .loadingBar { height: 200px; width: 10%; background: lightblue; } </style> <link rel="stylesheet" type="text/css" href="http://zongbu.game.leju.com/zhuanti/201603/lejumaifang/styles/styles.css" charset="utf-8" /> </head> <body> <img src="http://www.linkmedal.com/abra-sns/apps/portal/_static/img/menu_v1.png"> <img src="http://www.linkmedal.com/abra-sns/apps/portal/_static/img/menu_v2.png"> <img src="http://www.linkmedal.com/abra-sns/apps/portal/_static/img/menu_v3.png"> <img src="http://www.linkmedal.com/abra-sns/apps/portal/_static/img/menu_v4.png"> <img src="http://p2.qhimg.com/t01ed1438874f940dc0.jpg"> <img src="http://p2.qhimg.com/t01ed1438874f940dc0.jpg"> <img src="http://p9.qhimg.com/t01b4ff03b72c7dc6c7.jpg"> <img src="http://p2.qhimg.com/t01dd90dfbec92074d0.jpg"> <img src="http://p7.qhimg.com/t01cfec6d87cde457c5.jpg"> <img src="http://p0.qhimg.com/t01943ced462da67833.jpg"> <img src="http://p3.qhimg.com/t01cd6a4d4b4bd4457b.jpg"> <div class=" loadingMain "> <div class="loadingBar "> 0 </div> </div> <audio src="http://zongbu.game.leju.com/zhuanti/201603/lejumaifang/mp3/kbps.mp3 " autoplay=" " loop=" " data-src="http://zongbu.game.leju.com/zhuanti/201603/lejumaifang/mp3/kbps.mp3 " id="music "></audio> <!--<script src='http://zongbu.game.leju.com/zhuanti/201603/lejumaifang/js/main.min.js'></script>--> <script> var sources1 = [ 'http://p2.qhimg.com/t01ed1438874f940dc0.jpg', 'http://p9.qhimg.com/t01b4ff03b72c7dc6c7.jpg', 'http://p2.qhimg.com/t01dd90dfbec92074d0.jpg', 'http://p7.qhimg.com/t01cfec6d87cde457c5.jpg', 'http://p9.qhimg.com/t01943ced462da67833.jpg', 'http://p0.qhimg.com/t01943ced462da67833.jpg', 'http://p6.qhimg.com/t01aa15a7ba7ccb49a7.jpg', 'http://p8.qhimg.com/t010f1e8badf1134376.jpg', 'http://p8.qhimg.com/t01cf37ea915533a032.jpg', 'http://p3.qhimg.com/t0193d8a3963e1803e9.jpg', 'http://p3.qhimg.com/t01cd6a4d4b4bd4457b.jpg' ]; var QM = {}; (function($) { var count = 0; $.loading = function() { var img1 = document.getElementsByTagName("img"); var link1 = document.getElementsByTagName("link"); var script1 = document.getElementsByTagName("script"); var audio1 = document.getElementsByTagName("audio"); console.log(img1); console.log(link1); console.log(script1); console.log(audio1); var img = [].slice.call(document.getElementsByTagName("img")); var link = [].slice.call(document.getElementsByTagName("link")); var script = [].slice.call(document.getElementsByTagName("script")); var audio = [].slice.call(document.getElementsByTagName("audio")); var sources = img; console.log(img); console.log(link); console.log(script); console.log(audio); console.log(sources); var l = sources.length; console.info(l); for (var i = 0; i < l; i++) { console.log(sources[i]); detection(sources[i], l); } } function detection(v, l) { v.onload = function() { ++count; var percent = Math.floor(count / l * 100) + '%'; console.log('success', count); document.querySelector(".loadingBar ").style.width = percent; document.querySelector(".loadingBar ").innerHTML = percent; } v.onerror = function() { ++count; var percent = Math.floor(count / l * 100) + '%'; console.log('fail', count); document.querySelector(".loadingBar ").style.width = percent; document.querySelector(".loadingBar ").innerHTML = percent; } if (count == l) { // document.querySelector(".loadingMain ").style.display = 'none'; } } return $; })(QM); QM.loading(); </script> </body> </html>
#
var QM = {}; (function($) { var count = 0; $.loading = function() { var img = [].slice.call(document.getElementsByTagName("img")); var link = [].slice.call(document.getElementsByTagName("link")); //var script = [].slice.call(document.getElementsByTagName("script")); //var audio = [].slice.call(document.getElementsByTagName("audio")); var sources = img.concat(link); var l = sources.length; for (var i = 0; i < l; i++) { detection(sources[i], l); } } function detection(v, l) { v.onload = function() { ++count; var percent = Math.floor(count / l * 100) + '%'; document.querySelector(".loadingBar ").style.width = percent; document.querySelector(".loadingBar ").innerHTML = percent; } v.onerror = function() { ++count; var percent = Math.floor(count / l * 100) + '%'; document.querySelector(".loadingBar ").style.width = percent; document.querySelector(".loadingBar ").innerHTML = percent; } if (count == l) { document.querySelector(".loadingMain ").style.display = 'none'; } } return $; })(QM); QM.loading();
