文档章节

Js/css文件异步加载器

得推网络
 得推网络
发布于 2015/03/31 21:53
字数 673
阅读 31
收藏 0
点赞 0
评论 0
/*skyLoad.js加载公用js文件*/
var iframedir="../";
var ROOT="../";
var inapp=true;
var CLICK="click";
var SITE="http://skycms.skymvc.com/";  
if(inapp){
	appjs="js/app.js";
}else{
	appjs="js/wap.js";
}
var basejs=["js/zepto.min.js","js/template-native.js","js/mui.min.js","js/common.js",appjs]	;
var basecss=["css/mui.css","css/app.css"];

/*css加载器*/
function loadcss(css){
	for(var i=0;i<css.length;i++){
		addcss(css[i]);
	}
}
function addcss(file){
	var head = document.head || document.getElementsByTagName("head")[0] || document.documentElement;
	var	css=document.createElement('link'); 
	  css.href=ROOT+file; 
	  css.rel='stylesheet'; 
	  css.type='text/css'; 
	  head.appendChild(css);
	 
	
}
/**JS加载器**/
function addjs(i,jss,loadjs_init){
	var head = document.head || document.getElementsByTagName("head")[0] || document.documentElement,
	script,options,s;
	var i=i;
	s = options || {};
	var url = ROOT+jss[i];
	script = document.createElement("script");
	script.async = false;
	script.type = "text/javascript";
	script.charset="utf-8";
	script.src = url;
	head.insertBefore(script, head.firstChild);
	script.addEventListener("load", function() {
		if(i<jss.length-1){
			addjs(i+1,jss,loadjs_init);
		}else{
					 
			loadjs_init();
		}
	},false);
	 
	
}
function loadjs(jss,loadjs_init){ 
	addjs(0,jss,loadjs_init);	
}

/*END js加载器*/
function skyready(fun){
	if(inapp){
		if(window.plus){ 
			fun();
		}else{
			document.addEventListener('plusready',fun(),false);
		}
	}else{
		$(document).ready(function(){
			fun();
		})
	}
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>SkyCMS</title>
    <script src="js/skyload.js"></script>
    <script>
    	ROOT="./";
    	iframedir="./";
    	loadcss(basecss);
    	basejs.push("js/sidemenu.js");
    </script>
  
    <link href="css/sidemenu.css" rel="stylesheet">   
</head> 
<body>  
	<div id="sidemenu-left" class="side">
  <div id="sidemenu-left-close" onClick="sidemenu_left_hide()"><i class="mui-icon mui-icon-close"></i></div>
  <div class="sidemenu-list"> 
     
    <div class="item"><a href="article/index.html">文章</a></div>
    <div class="item"><a href="forum/index.html">论坛</a></div>
     <div class="item"><a href="picture/index.html">图片</a></div> 
     <div class="item"><a href="product/index.html">产品</a></div>
      
  </div>
</div>
	
	<header class="mui-bar mui-bar-nav">
		<a class="mui-icon mui-icon-bars mui-pull-left" onClick="sidemenu_left_show()"></a>
		<h1 class="mui-title">SkyCms</h1>
		<a class="mui-icon mui-icon-person mui-pull-right" href="user/user.html"></a>
	</header>
	
	<div class="mui-content">
		<style>
					.mui-slider-item{height: 200px;}
					.mui-slider-item-img{max-height: 201px; min-height: 200px;}
				</style>
				 <div id="slider" class="mui-slider">
				<div id="slider-ct" class="mui-slider-group mui-slider-loop">
					 
					 
				</div>
				<div id="slider-ind" class="mui-slider-indicator mui-text-right">
					 
				</div>
			</div>
			 
 
			<!------END slider------->
		<ul class="mui-table-view" id="list-art">			 
		</ul>
		   
		<div id="pullup" class="pullup">加载更多..</div>
	</div>
<!------------模板----------------------------------->
<script id="list-art-tpl" type="text/html">
			  <%for (var i=0;i<data.length;i++) {%>
        		<li class="mui-table-view-cell">
        			<a href="article/show.html?id=<%=data[i].id%>" class="mui-navigate-right">
        			<%if(data[i].imgurl){%>
        			<img class="mui-media-object mui-pull-left" src="<%=data[i].imgurl%>.100x100.jpg">
                    <div class="mui-media-body">
                        <%=data[i].title%>
                        <p class='mui-ellipsis'><%=data[i].description%></p>
                    </div>
                    <%}else{%>
        			<%=data[i].title%>
        			<%}%>
        			</a>
        		</li>
   			 <%}%>
				
		</script>

<!------------End 模板------------------------------>
<!----------脚本控制器-------------------->
<script>
	

		function indexad(){				   
				get(SITE+"index.php?m=adapi&a=listbyno&no=app-index",function(data){
 
					var len=data.length;
					var html='';				 
					var item;
					var ind='';
					var firstitem;					
					for(var i=0;i<len;i++){
						item='';
						if(i==0 ){ 
							ind+='<div class="mui-indicator mui-active"></div>';
							item='<div class="mui-slider-item mui-slider-item-duplicate">'
						}else if(i==len-1){
							item='<div class="mui-slider-item mui-slider-item-duplicate">'
							ind+='<div class="mui-indicator"></div>';
						}else{
							item='<div class="mui-slider-item">';
							ind+='<div class="mui-indicator"></div>';
						}
						
						item+='<a href="'+data[i].link1+'"><img class="mui-slider-item-img" src="" data-src="'+SITE+data[i].imgurl+'"><p class="mui-slider-title">'+data[i].title+'</p></a>';
						item+='</div>';
						if(i==0) firstitem=item; 
						html+=item;
						if(i==len-1){
							html=item+html+firstitem;
						}
						
					}
					$("#slider-ind").html(ind); 
					$("#slider-ct").html(html);
					var slider = mui("#slider");
					
					slider.slider({
							interval: 4000
					});
					var its=mui(".mui-slider-item-img"); 
					 
					for(var j=0;j<its.length;j++){
						its[j].attributes['src'].value=its[j].attributes['data-src'].value;
					}
					
 
					
				});	
			} 
		
		function art(){			 
			get(SITE+"app.php?m=article&a=list",function(data){
				var tdata={data:data,site:SITE};
				var html = template('list-art-tpl', tdata);
				$("#list-art").append(html);
			});		
		}
		
	function plusReady(){
		 
  		indexad();
		art(); 
	}
		 
	
	function init(){
		skyready(plusReady); 
		   
		listload.loadid="#pullup";
		listload.showload(function(){
			art();
		})
	}			
	loadjs(basejs,init);
		
</script>
</body>
</html>


© 著作权归作者所有

共有 人打赏支持
得推网络
粉丝 2
博文 14
码字总数 8499
作品 1
厦门
高级程序员
JSON,异步加载(学习笔记)

JSON是一种传输数据的格式(以对象为样板,本质上就是对象,但用途有区别,对象就是本地用的,json是用来数据传输的,前端与后端的数据通信) JSON是静态类(不需要构造),类似于Math,内部...

Mrs_CoCo ⋅ 04/23 ⋅ 0

再谈DOMContentLoaded与渲染阻塞—分析html页面事件与资源加载

浏览器的多线程中,有的线程负责加载资源,有的线程负责执行脚本,有的线程负责渲染界面,有的线程负责轮询、监听用户事件。 这些线程,根据浏览器自身特点以及web标准等等,有的会被浏览器特...

zhoulujun ⋅ 05/22 ⋅ 0

再谈 load 与 DOMContentLoaded

本文首发在github,感兴趣请点击此处 window 的 onload 事件对于前端童鞋来说肯定是熟的不能再熟了,相信大家在刚入门时,见的最多的可能就是 load 事件了。load 事件接触多了,大家就会接触...

lucefer ⋅ 前天 ⋅ 0

一天掌握构建化工具Grunt、gulp、webpack(下)

1、gulp篇 中文主页: http://www.gulpjs.com.cn/ 上面那一篇博客我们已经讲述了如何创建工程以及安装所有的环境和准备,如果没有看到的话,链接在下面 https://my.oschina.net/mdxlcj/blog/1...

木九天 ⋅ 04/27 ⋅ 0

前端性能优化:细说JavaScript的加载与执行

本文主要是从性能优化的角度来探讨JavaScript在加载与执行过程中的优化思路与实践方法,既是细说,文中在涉及原理性的地方,不免会多说几句,还望各位读者保持耐心,仔细理解,请相信,您的耐...

小白师兄 ⋅ 06/19 ⋅ 0

一篇就让你学会webpack4

webpack 是一个现代 JavaScript 应用程序的静态模块打包器,目前最流行的打包神器,接下来聊一下webpack4 首先webpack4要求node版本在8.5以上,cmd中node -v查看node版本。 1.什么是webpack...

正儿八经的娇娇 ⋅ 05/14 ⋅ 0

如何让webpack打包的速度提升50%?

随着前端应用包含的模块数量日益增长,代码打包的耗时也越来越长。公司很多项目打包耗时超过了10秒,对于一般人来说超过10秒的等待是比较难受的,虽然后续增量编辑的速度很快。于是我想结合实...

SBDavid ⋅ 05/10 ⋅ 0

基于 jQuery 的前端 UI 框架 - LuLu UI

LuLu UI 是一个基于 jQuery,针对 PC 网站,兼容 IE8+ 或 IE7+ 的前端 UI 框架,包含 20+ 静态或动态 UI 组件。 上手简单 lulu整个项目就是提供一些UI组件的JS和CSS,很纯粹的JS和CSS,没有任...

匿名 ⋅ 06/20 ⋅ 0

Atom飞行手册翻译: 3.1 ~ 3.2

现在是时候来介绍在这一Hackable的编辑器中,真正“Hackable”的部分了。像我们在整个第二章中看到的那样,Atom中很大一部分都由一大堆包组成。如果你想向Atom中添加一些功能,你必须要访问和...

apachecn_飞龙 ⋅ 2015/08/03 ⋅ 0

细谈在HTML中使用JavaScript

细谈在HTML中使用JavaScript 前言 JavaScript是浏览器的内置脚本语言。当网页中嵌入了JavaScript脚本,浏览器加载网页时,就会执行脚本,从而操作浏览器,实现各种动态效果 JavaScript代码嵌...

幸运券发放 ⋅ 05/25 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

win10怎么彻底关闭自动更新

win10自带的更新每天都很多,每一次下载都要占用大量网络,而且安装要等得时间也蛮久的。 工具/原料 Win10 方法/步骤 单击左下角开始菜单点击设置图标进入设置界面 在设置窗口中输入“服务”...

阿K1225 ⋅ 今天 ⋅ 0

Elasticsearch 6.3.0 SQL功能使用案例分享

The best elasticsearch highlevel java rest api-----bboss Elasticsearch 6.3.0 官方新推出的SQL检索插件非常不错,本文一个实际案例来介绍其使用方法。 1.代码中的sql检索 @Testpu...

bboss ⋅ 今天 ⋅ 0

informix数据库在linux中的安装以及用java/c/c++访问

一、安装前准备 安装JDK(略) 到IBM官网上下载informix软件:iif.12.10.FC9DE.linux-x86_64.tar放在某个大家都可以访问的目录比如:/mypkg,并解压到该目录下。 我也放到了百度云和天翼云上...

wangxuwei ⋅ 今天 ⋅ 0

PHP语言系统ZBLOG或许无法重现月光博客的闪耀历史[图]

最近在写博客,希望通过自己努力打造一个优秀的教育类主题博客,名动江湖,但是问题来了,现在写博客还有前途吗?面对强大的自媒体站点围剿,还有信心和可能型吗? 至于程序部分,我选择了P...

原创小博客 ⋅ 今天 ⋅ 0

IntelliJ IDEA 2018.1新特性

工欲善其事必先利其器,如果有一款IDE可以让你更高效地专注于开发以及源码阅读,为什么不试一试? 本文转载自:netty技术内幕 3月27日,jetbrains正式发布期待已久的IntelliJ IDEA 2018.1,再...

Romane ⋅ 今天 ⋅ 0

浅谈设计模式之工厂模式

工厂模式(Factory Pattern)是 Java 中最常用的设计模式之一。这种类型的设计模式属于创建型模式,它提供了一种创建对象的最佳方式。 在工厂模式中,我们在创建对象时不会对客户端暴露创建逻...

佛系程序猿灬 ⋅ 今天 ⋅ 0

Dockerfile基础命令总结

FROM 指定使用的基础base image FROM scratch # 制作base image ,不使用任何基础imageFROM centos # 使用base imageFROM ubuntu:14.04 尽量使用官方的base image,为了安全 LABEL 描述作...

ExtreU ⋅ 昨天 ⋅ 0

存储,对比私有云和公有云的不同

导读 说起公共存储,很难不与后网络公司时代的选择性外包联系起来,但尽管如此,它还是具备着简单和固有的可用性。公共存储的名字听起来也缺乏专有性,很像是把东西直接堆放在那里而不会得到...

问题终结者 ⋅ 昨天 ⋅ 0

C++难点解析之const修饰符

C++难点解析之const修饰符 c++ 相比于其他编程语言,可能是最为难掌握,概念最为复杂的。结合自己平时的C++使用经验,这里将会列举出一些常见的难点并给出相应的解释。 const修饰符 const在c...

jackie8tao ⋅ 昨天 ⋅ 0

聊聊spring cloud netflix的HystrixCommands

序 本文主要研究一下spring cloud netflix的HystrixCommands。 maven <dependency> <groupId>org.springframework.cloud</groupId> <artifactId>spring-clo......

go4it ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部