lazy load optimize

AJLoveChina · Apr 18, 2016 · 2cc4bc8 · 2cc4bc8
1 parent a3b24fb
commit 2cc4bc8
Show file tree

Hide file tree

Showing 15 changed files with 331 additions and 2,146 deletions.
diff --git a/.gitignore b/.gitignore
@@ -28,4 +28,6 @@ java_demo/Pengfu/target
 java_demo/Pengfu/target/Pengfu-0.0.1-SNAPSHOT.war
 *.jar
 *.properties
-*.log
+*.log
+java_demo/Pengfu/WebRoot/images
+java_demo/Pengfu/qqconnect.log
diff --git a/java_demo/Pengfu/WebRoot/views/huodong/homeImagesRoll.jsp b/java_demo/Pengfu/WebRoot/views/huodong/homeImagesRoll.jsp
@@ -20,7 +20,7 @@
 		</c:forEach>
 	</div>
 
-	<div id="aj-home-showcase">
+	<div id="aj-home-showcase" class="aj-hide-when-phone">
 		<a class="atag">
 			<img src="/web/pic/showcase1.png" alt=""/>
 		</a>
@@ -37,12 +37,12 @@
 <div>
 <style>
 	#aj-home-images-roll{
+		width:534px;height:267px;
 		margin-bottom:10px;
-		width:534px;
-		height:267px;
 		position:relative;
 		display: none;
 		float:left;
+		max-width: 100%;
 	}
 	#aj-home-images-roll .aimg{
 		width:100%;
@@ -114,6 +114,18 @@
 				loaded : function () {
 					container.fadeIn();
 					container.css("height" , container.width() / 2);
+					container.find("img.aimg").each(function () {
+						$(this).css({
+							width : container.css('width'),
+							height : container.css('height')
+						});
+					});
+					container.find('.atitle').each(function () {
+						$(this).css({
+							top : container.height() - $(this).height() + "px",
+							bottom : 'auto'
+						});
+					});
 				}
 			}
 	    });

diff --git a/java_demo/Pengfu/WebRoot/views/includes/jokeTypeChoice.jsp b/java_demo/Pengfu/WebRoot/views/includes/jokeTypeChoice.jsp
@@ -2,8 +2,10 @@
 <style>
 	#aj-top-type-choice{
 		width:100%;
+		max-height:140px;
+		overflow:hidden;
 		background-color: white;
-		padding:10px 0;
+		margin:10px 0;
 	}
 	#aj-top-type-choice a{
 		text-decoration: none;
@@ -48,33 +50,60 @@
         items.each(function (index, item) {
         	random = Math.floor(Math.random() * colors.length);
         	$(this).css("backgroundColor", colors[random]);
-        })   
+        })
+        
+        var container = $("#aj-top-type-choice");
+        var div = $(document.createElement("div"));
+        var list = $("#aj-top-type-choice .one");
+       	div.addClass("aj-types-collection");
+       		
+       	for (var i = 9; i <= list.length; i++) {
+       		
+       		div.append(list[i]);
+       		
+       		if (i % 8 == 0) {
+       			container.append(div.clone());
+       			div.html("");
+       		}
+       	}
+       	
+       	container.slidesjs({
+       		start : 1,
+			pagination : {
+				active : false
+			},
+			navigation : {
+				active : false
+			},
+			play : {
+				auto : false,
+				interval : 3000
+			}
+       	});
 	
 	})
 </script>
-<div id="aj-top-type-choice" class="clearfix aj-phone-only">
-	<div class="one">
-		<a class="atag" href="<%=Joke.getHrefByJokeType(JokeType.ALL) %>">
-			<span class="icon glyphicon glyphicon-th"></span>
-			<span class="text">全部笑话</span>
-		</a>
-	</div>
-	<div class="one">
-		<a class="atag" href="<%=Joke.getHrefByJokeType(JokeType.ONLY_WORD) %>">
-			<span class="icon glyphicon glyphicon-text-width"></span>
-			<span class="text">文字笑话</span>
-		</a>
-	</div>
-	<div class="one">
-		<a class="atag" href="<%=Joke.getHrefByJokeType(JokeType.STATIC_IMAGE) %>">
-			<span class="icon glyphicon glyphicon-picture"></span>
-			<span class="text">图片笑话</span>
-		</a>
-	</div>
-	<div class="one">
-		<a class="atag" href="<%=Joke.getHrefByJokeType(JokeType.GIF) %>">
-			<span class="icon glyphicon glyphicon-gift"></span>
-			<span class="text">动态图笑话</span>
-		</a>
+
+<div class="aj-show-when-phone aj-hide-when-pc" style="display: none;">
+
+<div id="aj-top-type-choice" class="clearfix aj-show-when-phone aj-hide-when-pc">
+
+	<div class="aj-types-collection">
+		<%
+			for (JokeType jt : JokeType.getLegalJokeTypes()) {
+			%>
+
+				<div class="one">
+					<a class="atag" href="<%=jt.getHref() %>">
+						<span class="icon <%=jt.getIconClassName() %>"></span>
+						<span class="text"><%=jt.getRealName() %></span>
+					</a>
+				</div>		
+
+			<%	
+			}
+		 %>	
 	</div>
-</div>
+</div>
+
+</div>
diff --git a/java_demo/Pengfu/WebRoot/views/includes/resource_local.jsp b/java_demo/Pengfu/WebRoot/views/includes/resource_local.jsp
@@ -1,3 +1,8 @@
+
+<script>
+	// 全局变量, 如果要暴露接口请包涵在该作用域内
+	var aj = {};
+</script>
 <script src="bower_components/jquery/jquery.js"></script>
 <script src="web/js/includes/jquery.lazyload.js"></script>
 <script src="web/js/includes/angular.min.js"></script>

diff --git a/java_demo/Pengfu/WebRoot/views/includes/resource_server.jsp b/java_demo/Pengfu/WebRoot/views/includes/resource_server.jsp
@@ -2,6 +2,11 @@
 String path = request.getContextPath();
  %>
 
+<script>
+	// 全局变量, 如果要暴露接口请包涵在该作用域内
+	var aj = {};
+</script>
+
 <script src="http://apps.bdimg.com/libs/jquery/1.10.0/jquery.min.js"></script>
 <script src="http://apps.bdimg.com/libs/jquery-lazyload/1.9.5/jquery.lazyload.js"></script>
 <script src="http://apps.bdimg.com/libs/angular.js/1.2.9/angular.min.js"></script>

diff --git a/java_demo/Pengfu/WebRoot/views/includes/userLogin.jsp b/java_demo/Pengfu/WebRoot/views/includes/userLogin.jsp
@@ -115,7 +115,7 @@ request.setAttribute("curUser", curUser);
 	}
 </style>
 
-<div class="user-login">
+<div class="user-login" data-islogin="0">
 	<div class="u-l-photo glyphicon glyphicon-user"></div>
 	<div class="u-l-right">
 		<div class="u-l-sign-before">
@@ -266,6 +266,9 @@ request.setAttribute("curUser", curUser);
 			       after.find(".nickname").html(nickname);
 			       after.show();
 			       
+			       // 切换登陆状态, 让User类判断是否登陆了
+			       $(".user-login").attr("data-islogin", "1");
+			       
 			       // 向服务端注册
 			       if (from === "qq") {
 			       
@@ -339,6 +342,9 @@ request.setAttribute("curUser", curUser);
 		        before.show();
 		        sessionStorage.removeItem(config.SIGNIN_ATTR);
 		        
+		        
+		        $(".user-login").attr("data-islogin", "0");
+		        
 		        $.ajax({
 		        	url : config.SIGN_OUT,
 		        	type : "GET",

diff --git a/java_demo/Pengfu/WebRoot/views/item/one.jsp b/java_demo/Pengfu/WebRoot/views/item/one.jsp
@@ -11,6 +11,19 @@
     	</a>
     </div>
     <div class="panel-body" style="word-wrap:break-word;">
+    	<c:if test="${item.hasBackgroundInformation() }">
+    		<div class="backinfo">
+    			${item.getBackgroundInformation() }
+    		</div>
+    	</c:if>
+
+    	<div class="stamps">
+    		标签 :
+	     	<c:forEach var="stamp" items="${item.get$stampsArr() }">
+	    		<span class="stamp  random label label-default">${stamp }</span>
+	    	</c:forEach>   	
+    	</div>
+
     	<c:if test="${item.hasAuthor()}">
     		<div style="font-size:12px;padding:0 0 10px;">
 	    		作者 : 

diff --git a/java_demo/Pengfu/WebRoot/views/item/pendant.jsp b/java_demo/Pengfu/WebRoot/views/item/pendant.jsp
@@ -5,14 +5,14 @@ String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.
 %>
 
 
-<div ng-controller="pendant-controller" id="aj-pendant" class="aj-pendant clearfix">
+<div ng-controller="pendant-controller" id="aj-pendant" class="aj-pendant clearfix aj-hide-when-phone">
     <div class="aitems">
         <span ng-repeat="item in items">
             <a ng-if="item.link" href="{{item.link}}" class="aitem" >
                 <span class="icon" ng-class="item.icon"></span>
                 <h4 class="title" ng-bind="item.title"></h4>
             </a>
-            <a ng-if="!item.link" href="javascript:;" class="aitem" >
+            <a ng-if="!item.link" href="javascript:;" class="aitem" ng-click="dealATagWithoutHref(item.title)">
                 <span class="icon" ng-class="item.icon"></span>
                 <h4 class="title" ng-bind="item.title"></h4>
             </a>
@@ -47,8 +47,24 @@ String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.
                     "title" : "首页",
                     "link" : "/",
                     "class" : ""
+                },
+                {
+                	"icon" : "glyphicon glyphicon-heart",
+                    "title" : "收藏",
+                    "class" : ""
                 }
             ]
+            
+            // 对于木有href(值为 javascript:;)的a标签, 我们给它自定义click事件
+            $scope.dealATagWithoutHref = function (title) {
+            	if (title == "收藏") {
+            		$scope.shoucang();
+            	}
+            }
+            
+            $scope.shoucang = function() {
+            	
+            }
 
         });
 
@@ -63,6 +79,7 @@ String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.
             }
         });
         resize();
+        
 
         function resize() {
             var docWidth = $(document).width(),
@@ -93,6 +110,7 @@ String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.
   width: 50px;
   font-size: 12px;
   color: #666;
+  transition:all 0.3s;
 }
 .aj-pendant a {
   text-decoration: none;

diff --git a/java_demo/Pengfu/WebRoot/web/css/index.css b/java_demo/Pengfu/WebRoot/web/css/index.css
@@ -51,16 +51,30 @@ body {
 .aj-phone-only{
 	display: none;
 }
-@media(max-width:1050px) {
+@media(min-width: 1050px) {
+	.aj-hide-when-pc{
+		display: none!important;
+	}
+}
+
+
+@media(max-width:900px) {
 	.aj-phone-only{
-		display: block;
+		display: block!important;
+	}
+	.aj-show-when-phone{
+		display: block!important;
+	}
+	.aj-hide-when-phone{
+		display: none!important;
 	}
 	div#aj-body{
 		min-height:450px;
 	}
 	.aj-body-right{
 		display: none;
 	}
+
 }
 #aj-body{
 	width:100%;
@@ -135,6 +149,17 @@ body {
 }
 
 .aj-joke-list-one{}
+.aj-joke-list-one .backinfo{
+	padding: 10px;border:1px solid #ccc;
+	background-color: #eee;
+	color:#888;
+}
+.aj-joke-list-one .stamps {
+	padding: 10px 0;
+}
+.aj-joke-list-one .stamps .stamp{
+
+}
 .aj-joke-list-one .panel-body{
 	font-size:14px;
 	line-height:26px;
@@ -260,6 +285,7 @@ body {
     line-height: 24px;
     font-size: 14px;
     height:96px;
+    overflow: hidden;
 }
 .aj-list-one .a-l-body .a-l-content .a-l-c-footer .alink:hover{
     filter: alpha(opacity=90);