html lazy_load.html

Posted 2021-05-11

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html lazy_load.html相关的知识，希望对你有一定的参考价值。

<html>
<head>
<title>LazyLoading Test</title>
<script>
	var AsyncLoader = function(src, cb) {
        	var s = document.createElement('script');
        	s.type = 'text/javascript';
			s.async = true;
			s.src = src + '?=' + Math.random(); // make sure we are loading this once
			if(typeof(cb) == 'function') {
				this.onLoad(cb);
			}
			var onLoad = this.onLoad();
			
				s.onreadystatechange = function() {
					if(this.readyState == 'loaded' ||
						this.readyState == 'complete') {
						onLoad();
					}
				};
				s.onload = onLoad;
				s.onerror = onLoad;
			
			var asyncLoad = function() {
				setTimeout(function() {
					document.getElementById('msg').innerHTML = document.getElementById('msg').innerHTML + 'Loading...';
					var x = document.getElementsByTagName('script')[0];
					var head = document.getElementsByTagName("head")[0];
					x.parentNode.insertBefore(s, x);
				}, 1000);
			};
			
			if (window.attachEvent) {
				window.attachEvent('onload', asyncLoad);
			} else if(window.addEventListener) {
				window.addEventListener('load', asyncLoad, false);
			}
	};
	
	AsyncLoader.prototype.onLoad = function(cb) {
		if(typeof(cb) == 'function') {
			this._cb = cb;
		} else if(typeof(this._cb) == 'function') {
			var that = this;
			return function() {
				that._cb();
			}
		}
	};

	var loader = new AsyncLoader('http://www.mersenneforum.org/txt/43.txt', function() {
		document.getElementById('msg').innerHTML = document.getElementById('msg').innerHTML + 'done';
	});

</script>
</head>
<body>
<h1>Javascript Lazy Loading Test</h1>
<div id='msg'></div>
<div style="height:1000px; width: 50px; background: #aaaaaa;"></div>
</body>
</html>

以上是关于html lazy_load.html的主要内容，如果未能解决你的问题，请参考以下文章

Html.Partial 与 Html.RenderPartial 和 Html.Action 与 Html.RenderAction

html Html模板/ Html Boilerplate |标签HTML