From 11b9dca67201a7249a12e8ab295662ad7f3942ff Mon Sep 17 00:00:00 2001 From: xxy <1179705413@qq.com> Date: Thu, 26 Dec 2019 07:16:43 +0800 Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=9B=BE=E7=89=87=E6=87=92?= =?UTF-8?q?=E5=8A=A0=E8=BD=BD=E6=9C=BA=E5=88=B6=EF=BC=8C=E6=8F=90=E4=BE=9B?= =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E5=8A=A0=E8=BD=BD=E9=80=9F=E5=BA=A6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/main/resources/static/js/lazyload.js | 180 ++++++++++++++++++ .../templates/books/book_search.html | 4 +- .../main/resources/templates/books/index.html | 6 +- .../templates/books/mh_book_search.html | 3 +- .../templates/books/soft_book_search.html | 3 +- 5 files changed, 191 insertions(+), 5 deletions(-) create mode 100644 novel-front/src/main/resources/static/js/lazyload.js diff --git a/novel-front/src/main/resources/static/js/lazyload.js b/novel-front/src/main/resources/static/js/lazyload.js new file mode 100644 index 0000000..da97305 --- /dev/null +++ b/novel-front/src/main/resources/static/js/lazyload.js @@ -0,0 +1,180 @@ +/*! + * Lazy Load - JavaScript plugin for lazy loading images + * + * Copyright (c) 2007-2019 Mika Tuupola + * + * Licensed under the MIT license: + * http://www.opensource.org/licenses/mit-license.php + * + * Project home: + * https://appelsiini.net/projects/lazyload + * + * Version: 2.0.0-rc.2 + * + */ + +(function (root, factory) { + if (typeof exports === "object") { + module.exports = factory(root); + } else if (typeof define === "function" && define.amd) { + define([], factory); + } else { + root.LazyLoad = factory(root); + } +}) (typeof global !== "undefined" ? global : this.window || this.global, function (root) { + + "use strict"; + + if (typeof define === "function" && define.amd){ + root = window; + } + + const defaults = { + src: "data-src", + srcset: "data-srcset", + selector: ".lazyload", + root: null, + rootMargin: "0px", + threshold: 0 + }; + + /** + * Merge two or more objects. Returns a new object. + * @private + * @param {Boolean} deep If true, do a deep (or recursive) merge [optional] + * @param {Object} objects The objects to merge together + * @returns {Object} Merged values of defaults and options + */ + const extend = function () { + + let extended = {}; + let deep = false; + let i = 0; + let length = arguments.length; + + /* Check if a deep merge */ + if (Object.prototype.toString.call(arguments[0]) === "[object Boolean]") { + deep = arguments[0]; + i++; + } + + /* Merge the object into the extended object */ + let merge = function (obj) { + for (let prop in obj) { + if (Object.prototype.hasOwnProperty.call(obj, prop)) { + /* If deep merge and property is an object, merge properties */ + if (deep && Object.prototype.toString.call(obj[prop]) === "[object Object]") { + extended[prop] = extend(true, extended[prop], obj[prop]); + } else { + extended[prop] = obj[prop]; + } + } + } + }; + + /* Loop through each object and conduct a merge */ + for (; i < length; i++) { + let obj = arguments[i]; + merge(obj); + } + + return extended; + }; + + function LazyLoad(images, options) { + this.settings = extend(defaults, options || {}); + this.images = images || document.querySelectorAll(this.settings.selector); + this.observer = null; + this.init(); + } + + LazyLoad.prototype = { + init: function() { + + /* Without observers load everything and bail out early. */ + if (!root.IntersectionObserver) { + this.loadImages(); + return; + } + + let self = this; + let observerConfig = { + root: this.settings.root, + rootMargin: this.settings.rootMargin, + threshold: [this.settings.threshold] + }; + + this.observer = new IntersectionObserver(function(entries) { + Array.prototype.forEach.call(entries, function (entry) { + if (entry.isIntersecting) { + self.observer.unobserve(entry.target); + let src = entry.target.getAttribute(self.settings.src); + let srcset = entry.target.getAttribute(self.settings.srcset); + if ("img" === entry.target.tagName.toLowerCase()) { + if (src) { + entry.target.src = src; + } + if (srcset) { + entry.target.srcset = srcset; + } + } else { + entry.target.style.backgroundImage = "url(" + src + ")"; + } + } + }); + }, observerConfig); + + Array.prototype.forEach.call(this.images, function (image) { + self.observer.observe(image); + }); + }, + + loadAndDestroy: function () { + if (!this.settings) { return; } + this.loadImages(); + this.destroy(); + }, + + loadImages: function () { + if (!this.settings) { return; } + + let self = this; + Array.prototype.forEach.call(this.images, function (image) { + let src = image.getAttribute(self.settings.src); + let srcset = image.getAttribute(self.settings.srcset); + if ("img" === image.tagName.toLowerCase()) { + if (src) { + image.src = src; + } + if (srcset) { + image.srcset = srcset; + } + } else { + image.style.backgroundImage = "url('" + src + "')"; + } + }); + }, + + destroy: function () { + if (!this.settings) { return; } + this.observer.disconnect(); + this.settings = null; + } + }; + + root.lazyload = function(images, options) { + return new LazyLoad(images, options); + }; + + if (root.jQuery) { + const $ = root.jQuery; + $.fn.lazyload = function (options) { + options = options || {}; + options.attribute = options.attribute || "data-src"; + new LazyLoad($.makeArray(this), options); + return this; + }; + } + + return LazyLoad; +}); \ No newline at end of file diff --git a/novel-front/src/main/resources/templates/books/book_search.html b/novel-front/src/main/resources/templates/books/book_search.html index 3338bd6..8ffd57c 100644 --- a/novel-front/src/main/resources/templates/books/book_search.html +++ b/novel-front/src/main/resources/templates/books/book_search.html @@ -115,7 +115,7 @@
+ class="lazyload" th:attr="data-src=${book.picUrl}"/>
@@ -156,8 +156,10 @@
+