js实现页面图片加载进度条
//html <div id="loading" class="loading"> <div class="load"> <span id="loadingSpan"></span> </div> </div> <div id="content"><img src="content_01.jpg" /><img src="content_02.jpg" /><img src=="content_03.jpg" /><img src="content_04.jpg" /></div> //js <script type="text/javascript"> var core = { //资源预加载 loadResources: function() { var bodyHeight = $(window).height(); $("#loading").height(bodyHeight); var imgPath = "images/"; var sourceArr = [ ‘content_01.jpg‘, ‘content_02.jpg‘, ‘content_03.jpg‘, ‘content_04.jpg‘, ‘content_05.jpg‘ ]; for (var i = 0; i < sourceArr.length; i++) { sourceArr[i] = (imgPath + sourceArr[i]); } var loadImage = function(path, callback) { var img = new Image(); img.onload = function() { img.onload = null; callback(path); } img.src = path; } var imgLoader = function(imgs, callback) { var len = imgs.length, i = 0; while (imgs.length) { loadImage(imgs.shift(), function(path) { callback(path, ++i, len); }); } } var bodyh = document.documentElement.clientHeight; imgLoader(sourceArr, function(path, curNum, total) { var percent = curNum / total; document.getElementById(‘loadingSpan‘).innerHTML = ‘资源加载中...‘ + Math.floor(percent * 100) + "%"; if (percent == 1) { setTimeout(core.showPage, 300); } }); } (), //资源加载完毕,显示页面内容 showPage: function() { $("#loading").remove(); $("#content").show(); } } </script>
转自:tx lol
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。