增加图片懒加载开关

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.extern.slf4j.Slf4j;
import org.apache.commons.lang3.StringUtils;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
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.po.Book;
import xyz.zinglizingli.books.service.BookService;
@ -42,7 +44,7 @@ public class IndexController {
@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);
if (!indexRecBooksConfig.isRead() || recBooks == null) {
List<Map<String,String>> configMap = indexRecBooksConfig.getRecBooks();
@ -69,7 +71,10 @@ public class IndexController {
modelMap.put("recBooks", recBooks);
modelMap.put("hotBooks", hotBooks);
modelMap.put("newBooks", newBooks);
ServletContext application = req.getServletContext();
if(!"1".equals(application.getAttribute("noLazy"))) {
application.setAttribute("noLazy", noLazy);
}
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">
<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">
<img 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 th:case="'1'" align="center"
th:src="${book.picUrl}"/>
<img th:case="*" align="center"
class="lazyload" th:attr="data-src=${book.picUrl}"/>
</div>
</a>

View File

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

View File

@ -148,8 +148,11 @@
<div th:each="book : ${books}" class="layui-row" style="margin-bottom:10px;padding:10px;background: #f2f2f2">
<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">
<img 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 th:case="'1'" align="center"
th:attr="data-src=${book.picUrl}"/>
<img th:case="*" align="center"
class="lazyload" th:attr="data-src=${book.picUrl}"/>
</div>
</a>
@ -307,5 +310,4 @@
</script>
</html>