/*** js/css LazyLoad* * 變量hash記錄已經加載過的資源，避免重復加載* * Z.loadScript('a.js', function() { ... })** Z.loadScript('a.js', option, function() { ... })* * 加載多個js后才回調,如果某個js文件沒有下載下來則會報錯，且不會執行回調函數* Z.loadScript(['a.js','b.js','c.js'], function() { ... })* * option* charset: 'utf-8'* scope: xx* * 加載多個css后才回調，IE6/7/8/9和Opera中支持link的onreadystatechange事件* Firefox/Safari/Chrome既不支持onreadystatechange，也不支持onload。使用setTimeout延遲加載** Z.loadLink('a.css', function() { ... })* */var Z = {error : function(msg) {throw new Error(msg)},ua : window.navigator.userAgent.toLowerCase(),ie : /msie/.test(this.ua) && !/opera/.test(this.ua) };(function(Z) {var doc = window.document; var hash = {}; var types = ['Array', 'Function', 'Object', 'String', 'Number', 'Boolean', 'Date']; var nativeForEach = types.forEach; var emptyFunc = function () {}; var head = doc.head || doc.getElementsByTagName('head')[0];function forEach(obj, iterator, context) {if (obj == null) return;if (nativeForEach && obj.forEach === nativeForEach) {obj.forEach(iterator, context)} else if ( obj.length === +obj.length ) {for (var i = 0; i < obj.length; i++) {if (iterator.call(context||obj[i], obj[i], i, obj) === true) return}} else {for (var k in obj) {if (iterator.call(context||obj[k], obj[k], k, obj) === true) return}} }forEach(types, function(name) {Z['is' + name] = function(obj) {if (obj === undefined || obj === null) return false;return Object.prototype.toString.call(obj) === '[object ' + name + ']'} });function createEl(type, attrs) {var el = doc.createElement(type), attr;for (attr in attrs) {el.setAttribute(attr, attrs[attr])}return el } function done(list, obj) {hash[obj.url] = true;list.shift();if (!list.length) {obj.callback.call(obj.scope)} } function load(type, urls, option, callback) {if (Z.isString(urls)) {urls = [urls]}if (Z.isFunction(option)) {callback = option;option = {}}option = option || {};var obj = {scope: option.scope || window,callback: callback || emptyFunc};var list = [].concat(urls);var charset = option.charset || 'utf-8';forEach(urls, function(url, i) {var el = null;// 已經加載的不再加載if (hash[url]) {Z.error('warning: ' + url + ' has loaded.')}if (type === 'js') {el = createEl('script', {src: url,async: 'async',charset: charset})} else {el = createEl('link', {href: url,rel: 'stylesheet',type: 'text/css'})}(function(url) {if (Z.ie) {el.onreadystatechange = function() {var readyState = this.readyState;if(readyState === 'loaded' || readyState === 'complete') {obj.url = url;this.onreadystatechange = null;done(list, obj)}}} else {if (type == 'js') {el.onload = function() {obj.url = url;done(list, obj)};el.onerror = function () {Z.error(url + ' 不存在');}} else {setTimeout(function() {obj.url = url;done(list, obj)}, 100)}}})(url);if (type === 'js') {head.insertBefore(el, head.firstChild)} else {head.appendChild(el)}})}Z.loadScript = function(urls, option, callback) {load('js', urls, option, callback) };Z.loadLink = function(urls, option, callback) {load('css', urls, option, callback) }})(Z);

?

轉載于:https://www.cnblogs.com/fengyuqing/p/js-css-lazyload.html

總結

以上是生活随笔為你收集整理的javascript，css延迟加载器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。