增加图片懒加载开关

This commit is contained in:
xxy 2019-12-29 10:20:02 +08:00
parent 555aaf68f3
commit 2819a3034e
5 changed files with 50 additions and 35 deletions

View File

@ -3,10 +3,12 @@ package xyz.zinglizingli.books.web;
import lombok.RequiredArgsConstructor; import lombok.RequiredArgsConstructor;
import lombok.extern.slf4j.Slf4j; import lombok.extern.slf4j.Slf4j;
import org.apache.commons.lang3.StringUtils;
import org.springframework.beans.factory.annotation.Value; import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Controller; import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap; import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import xyz.zinglizingli.books.core.constant.CacheKeyConstans; import xyz.zinglizingli.books.core.constant.CacheKeyConstans;
import xyz.zinglizingli.books.po.Book; import xyz.zinglizingli.books.po.Book;
import xyz.zinglizingli.books.service.BookService; import xyz.zinglizingli.books.service.BookService;
@ -42,7 +44,7 @@ public class IndexController {
@RequestMapping(value = {"/index.html","/","/books","/book","/book/index.html"}) @RequestMapping(value = {"/index.html","/","/books","/book","/book/index.html"})
public String index(ModelMap modelMap){ public String index(@RequestParam(value = "noLazy", defaultValue = "0") String noLazy,HttpServletRequest req,ModelMap modelMap){
List<Book> recBooks = (List<Book>) commonCacheUtil.getObject(CacheKeyConstans.REC_BOOK_LIST_KEY); List<Book> recBooks = (List<Book>) commonCacheUtil.getObject(CacheKeyConstans.REC_BOOK_LIST_KEY);
if (!indexRecBooksConfig.isRead() || recBooks == null) { if (!indexRecBooksConfig.isRead() || recBooks == null) {
List<Map<String,String>> configMap = indexRecBooksConfig.getRecBooks(); List<Map<String,String>> configMap = indexRecBooksConfig.getRecBooks();
@ -69,7 +71,10 @@ public class IndexController {
modelMap.put("recBooks", recBooks); modelMap.put("recBooks", recBooks);
modelMap.put("hotBooks", hotBooks); modelMap.put("hotBooks", hotBooks);
modelMap.put("newBooks", newBooks); modelMap.put("newBooks", newBooks);
ServletContext application = req.getServletContext();
if(!"1".equals(application.getAttribute("noLazy"))) {
application.setAttribute("noLazy", noLazy);
}
return "books/index_"+indexTemplate; return "books/index_"+indexTemplate;
} }
} }

View File

@ -114,8 +114,10 @@
<div th:each="book : ${books}" class="layui-row" style="margin-bottom:10px;padding:10px;background: #f2f2f2"> <div th:each="book : ${books}" class="layui-row" style="margin-bottom:10px;padding:10px;background: #f2f2f2">
<a th:href="'/book/'+ ${book.id} + '.html'+ ${token!=null?'?token='+token:''}"> <a th:href="'/book/'+ ${book.id} + '.html'+ ${token!=null?'?token='+token:''}">
<div class="layui-col-xs6 layui-col-sm3 layui-col-md2 layui-col-lg2" style="text-align: center"> <div class="layui-col-xs6 layui-col-sm3 layui-col-md2 layui-col-lg2" style="text-align: center" th:switch = "${application.noLazy}">
<img align="center" <img th:case="'1'" align="center"
th:src="${book.picUrl}"/>
<img th:case="*" align="center"
class="lazyload" th:attr="data-src=${book.picUrl}"/> class="lazyload" th:attr="data-src=${book.picUrl}"/>
</div> </div>
</a> </a>

View File

@ -162,8 +162,10 @@
<div class="layui-row" style="text-align: center"> <div class="layui-row" style="text-align: center">
<span th:each="recBook : ${recBooks}"> <span th:each="recBook : ${recBooks}">
<a th:href="'/book/' + ${recBook.id} + '.html'"> <a th:href="'/book/' + ${recBook.id} + '.html'">
<div style="padding: 1%" class="layui-col-xs4 layui-col-sm4 layui-col-md4 layui-col-lg4"> <div style="padding: 1%" class="layui-col-xs4 layui-col-sm4 layui-col-md4 layui-col-lg4" th:switch = "${application.noLazy}">
<img style=" width:80%; height:auto; max-width:100%; max-height:100%;" <img th:case="'1'" style=" width:80%; height:auto; max-width:100%; max-height:100%;"
th:src="${recBook.picUrl}"/>
<img th:case="*" style=" width:80%; height:auto; max-width:100%; max-height:100%;"
class="lazyload" th:attr="data-src=${recBook.picUrl}"/> class="lazyload" th:attr="data-src=${recBook.picUrl}"/>
<br/> <br/>
<span th:text="${recBook.bookName}"></span> <span th:text="${recBook.bookName}"></span>
@ -184,8 +186,10 @@
<div style="margin-bottom: 5px" class="layui-col-xs12 layui-col-sm6 layui-col-md4 layui-col-lg4" <div style="margin-bottom: 5px" class="layui-col-xs12 layui-col-sm6 layui-col-md4 layui-col-lg4"
th:each="hotBook : ${hotBooks}"> th:each="hotBook : ${hotBooks}">
<a th:href="'/book/' + ${hotBook.id} + '.html'"> <a th:href="'/book/' + ${hotBook.id} + '.html'">
<div class="layui-col-xs5 layui-col-sm4 layui-col-md4 layui-col-lg4"> <div class="layui-col-xs5 layui-col-sm4 layui-col-md4 layui-col-lg4" th:switch = "${application.noLazy}" >
<img style=" width:100px; height:125px;" <img th:case="'1'" style=" width:100px; height:125px;"
th:src="${hotBook.picUrl}"/>
<img th:case="*" style=" width:100px; height:125px;"
class="lazyload" th:attr="data-src=${hotBook.picUrl}"/> class="lazyload" th:attr="data-src=${hotBook.picUrl}"/>
</div> </div>
<div class="layui-col-xs5 layui-col-sm6 layui-col-md6 layui-col-lg6"> <div class="layui-col-xs5 layui-col-sm6 layui-col-md6 layui-col-lg6">

View File

@ -124,8 +124,10 @@
<div th:each="book : ${books}" class="layui-row" style="margin-bottom:10px;padding:10px;background: #f2f2f2"> <div th:each="book : ${books}" class="layui-row" style="margin-bottom:10px;padding:10px;background: #f2f2f2">
<a th:href="'/book/'+ ${book.id} + '.html'"> <a th:href="'/book/'+ ${book.id} + '.html'">
<div class="layui-col-xs6 layui-col-sm3 layui-col-md2 layui-col-lg2" style="text-align: center"> <div class="layui-col-xs6 layui-col-sm3 layui-col-md2 layui-col-lg2" style="text-align: center" th:switch = "${application.noLazy}">
<img align="center" <img th:case="'1'" align="center"
th:attr="data-src=${book.picUrl}"/>
<img th:case="*" align="center"
class="lazyload" th:attr="data-src=${book.picUrl}"/> class="lazyload" th:attr="data-src=${book.picUrl}"/>
</div> </div>
</a> </a>

View File

@ -148,8 +148,11 @@
<div th:each="book : ${books}" class="layui-row" style="margin-bottom:10px;padding:10px;background: #f2f2f2"> <div th:each="book : ${books}" class="layui-row" style="margin-bottom:10px;padding:10px;background: #f2f2f2">
<a th:href="'/book/'+ ${book.id} + '.html'"> <a th:href="'/book/'+ ${book.id} + '.html'">
<div class="layui-col-xs6 layui-col-sm3 layui-col-md2 layui-col-lg2" style="text-align: center"> <div class="layui-col-xs6 layui-col-sm3 layui-col-md2 layui-col-lg2" style="text-align: center"
<img align="center" th:switch="${application.noLazy}">
<img th:case="'1'" align="center"
th:attr="data-src=${book.picUrl}"/>
<img th:case="*" align="center"
class="lazyload" th:attr="data-src=${book.picUrl}"/> class="lazyload" th:attr="data-src=${book.picUrl}"/>
</div> </div>
</a> </a>
@ -307,5 +310,4 @@
</script> </script>
</html> </html>