图片懒加载

src/main/resources/static/css/index/index.h5.css

@@ -9,7 +9,7 @@ li{list-style:none;}
 #swiper-container{width:100%;height:48vw;overflow:hidden;position:relative}
 #swiper-container .swiper-wrapper{position:relative;height:100%;z-index:0}
 #swiper-container .swiper-wrapper .swiper-slide{position:relative;zoom:1;vertical-align:middle;width:100%;overflow:hidden;text-align:center;background:#fff;}
-#swiper-container .swiper-wrapper img{width:auto;height:48vw;display:block}
+#swiper-container .swiper-wrapper img{width:auto;height:48vw;display:block;max-width:none;}
 #swiper-container .swiper-button-prev,#swiper-container .swiper-button-next{display:none}
 #swiper-container .swiper-pagination{width:100%;height:2.6vw;z-index:1;text-align:center;font-size:0;position:absolute;bottom:1.5vw;left:0}
 #swiper-container .swiper-pagination .swiper-pagination-bullet{display:block;width:2vw;border-width:1vw 1px;border-color:transparent;cursor:pointer;background:none;font-size:0;opacity:.2}

src/main/resources/static/js/equipment/list.js

@@ -71,6 +71,10 @@ var equipmentList = new Vue({
                     }else{
                         _self.listData = _self.listData.concat(resultData);
                     }
+                    setTimeout(function(){
+                        // 图片懒加载
+                        $("img[data-original]").lazyload();
+                    },500);
                 }
                 _self.listLoading = false;
                 _self.requestFlag = true;

src/main/resources/static/js/index.js

@@ -86,6 +86,10 @@ var homeData = new Vue({
                                 }
                             });
                         }
+                        setTimeout(function(){
+                            // 图片懒加载
+                            $("img[data-original]").lazyload();
+                        },500)
                     },500);
                     // 获取价格
                     var productIdArr = [];
@@ -140,6 +144,10 @@ var homeData = new Vue({
                                 }
                             });
                         }
+                        setTimeout(function(){
+                            // 图片懒加载
+                            $("img[data-original]").lazyload();
+                        },500)
                     },500)
                 }
             });

src/main/resources/static/js/product/list.js

@@ -82,6 +82,10 @@ var productList = new Vue({
                     _self.listRecord = result.total;
                     var resultData = setSearchProductList(result.items, _self.userId, function(){
                         _self.$forceUpdate();
+                        setTimeout(function(){
+                            // 图片懒加载
+                            $("img[data-original]").lazyload();
+                        },500);
                     });
                     if(isPC){
                         _self.listData = resultData;
@@ -145,6 +149,10 @@ var productList = new Vue({
                     console.log(_self.userId)
                     var resultData = setSearchProductList(result.items, _self.userId, function(){
                         _self.$forceUpdate();
+                        setTimeout(function(){
+                            // 图片懒加载
+                            $("img[data-original]").lazyload();
+                        },500);
                     });
                     if(isPC){
                         _self.listData = resultData;

src/main/resources/static/js/supplier/index.js

@@ -81,6 +81,10 @@ var supplierHome = new Vue({
                         });
                         setProductPrice(r.data, productIdArr.join(","), _self.userId, function () {
                             _self.$forceUpdate();
+                            setTimeout(function(){
+                                // 图片懒加载
+                                $("img[data-original]").lazyload();
+                            },500);
                         });
                     }
                     _self.mainProducts = r.data;
@@ -95,6 +99,10 @@ var supplierHome = new Vue({
                     _self.listRecord = result.total;
                     var resultData = setSearchProductList(result.items, _self.userId, function(){
                         _self.$forceUpdate();
+                        setTimeout(function(){
+                            // 图片懒加载
+                            $("img[data-original]").lazyload();
+                        },500);
                     });
                     _self.productLists = _self.productLists.concat(resultData);
                 }

src/main/resources/static/js/supplier/list.js

@@ -63,6 +63,10 @@ var supplierList = new Vue({
                         if(su.products && su.products.length>0) {
                             var productList = setSearchProductList(su.products, 0, function(){
                                 _self.$forceUpdate();
+                                setTimeout(function(){
+                                    // 图片懒加载
+                                    $("img[data-original]").lazyload();
+                                },500);
                             });
                         }
                         resultData.push({

src/main/resources/static/lib/lazyload.js

@@ -0,0 +1,320 @@
+/*!
+ * An jQuery | zepto plugin for lazy loading images.
+ * author -> jieyou
+ * see https://github.com/jieyou/lazyload
+ * use some tuupola's code https://github.com/tuupola/jquery_lazyload (BSD)
+ * use component's throttle https://github.com/component/throttle (MIT)
+ */
+;(function(factory){
+    if(typeof define === 'function' && define.amd){ // AMD
+        // you may need to change `define([------>'jquery'<------], factory)` 
+        // if you use zepto, change it rely name, such as `define(['zepto'], factory)`
+        define(['jquery'], factory)
+        // define(['zepto'], factory)
+    }else{ // Global
+        factory(window.jQuery || window.Zepto)
+    }
+})(function($,undefined){
+    var w = window,
+        $window = $(w),
+        defaultOptions = {
+            threshold                   : 0,
+            failure_limit               : 0,
+            event                       : 'scroll',
+            effect                      : 'show',
+            effect_params               : null,
+            container                   : w,
+            data_attribute              : 'original',
+            data_srcset_attribute       : 'original-srcset',
+            skip_invisible              : true,
+            appear                      : emptyFn,
+            load                        : emptyFn,
+            vertical_only               : false,
+            check_appear_throttle_time  : 300,
+            url_rewriter_fn             : emptyFn,
+            no_fake_img_loader          : false,
+            placeholder_data_img        : 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC',
+            // for IE6\7 that does not support data image
+            placeholder_real_img        : 'http://ditu.baidu.cn/yyfm/lazyload/0.0.1/img/placeholder.png'
+            // todo : 将某些属性用global来配置，而不是每次在$(selector).lazyload({})内配置
+        },
+        type // function
+
+    function emptyFn(){}
+
+    type = (function(){
+        var object_prototype_toString = Object.prototype.toString
+        return function(obj){
+            // todo: compare the speeds of replace string twice or replace a regExp
+            return object_prototype_toString.call(obj).replace('[object ','').replace(']','')
+        }
+    })()
+
+    function belowthefold($element, options){
+        var fold
+        if(options._$container == $window){
+            fold = ('innerHeight' in w ? w.innerHeight : $window.height()) + $window.scrollTop()
+        }else{
+            fold = options._$container.offset().top + options._$container.height()
+        }
+        return fold <= $element.offset().top - options.threshold
+    }
+
+    function rightoffold($element, options){
+        var fold
+        if(options._$container == $window){
+            // Zepto do not support `$window.scrollLeft()` yet.
+            fold = $window.width() + ($.fn.scrollLeft?$window.scrollLeft():w.pageXOffset)
+        }else{
+            fold = options._$container.offset().left + options._$container.width()
+        }
+        return fold <= $element.offset().left - options.threshold
+    }
+
+    function abovethetop($element, options){
+        var fold
+        if(options._$container == $window){
+            fold = $window.scrollTop()
+        }else{
+            fold = options._$container.offset().top
+        }
+        // console.log('abovethetop fold '+ fold)
+        // console.log('abovethetop $element.height() '+ $element.height())
+        return fold >= $element.offset().top + options.threshold  + $element.height()
+    }
+
+    function leftofbegin($element, options){
+        var fold
+        if(options._$container == $window){
+            // Zepto do not support `$window.scrollLeft()` yet.
+            fold = $.fn.scrollLeft?$window.scrollLeft():w.pageXOffset
+        }else{
+            fold = options._$container.offset().left
+        }
+        return fold >= $element.offset().left + options.threshold + $element.width()
+    }
+
+    function checkAppear($elements, options){
+        var counter = 0
+        $elements.each(function(i,e){
+            var $element = $elements.eq(i)
+            if(($element.width() <= 0 && $element.height() <= 0) || $element.css('display') === 'none'){
+                return
+            }
+            function appear(){
+                $element.trigger('_lazyload_appear')
+                // if we found an image we'll load, reset the counter 
+                counter = 0
+            }
+            // If vertical_only is set to true, only check the vertical to decide appear or not
+            // In most situations, page can only scroll vertically, set vertical_only to true will improve performance
+            if(options.vertical_only){
+                if(abovethetop($element, options)){
+                    // Nothing. 
+                }else if(!belowthefold($element, options)){
+                    appear()
+                }else{
+                    if(++counter > options.failure_limit){
+                        return false
+                    }
+                }
+            }else{
+                if(abovethetop($element, options) || leftofbegin($element, options)){
+                    // Nothing. 
+                }else if(!belowthefold($element, options) && !rightoffold($element, options)){
+                    appear()
+                }else{
+                    if(++counter > options.failure_limit){
+                        return false
+                    }
+                }
+            }
+        })
+    }
+
+    // Remove image from array so it is not looped next time. 
+    function getUnloadElements($elements){
+        return $elements.filter(function(i,e){
+            return !$elements.eq(i)._lazyload_loadStarted
+        })
+    }
+
+    // throttle : https://github.com/component/throttle , MIT License
+    function throttle (func, wait) {
+        var ctx, args, rtn, timeoutID // caching
+        var last = 0
+
+        return function throttled () {
+            ctx = this
+            args = arguments
+            var delta = new Date() - last
+            if (!timeoutID)
+                if (delta >= wait) call()
+                else timeoutID = setTimeout(call, wait - delta)
+            return rtn
+        }
+
+        function call () {
+            timeoutID = 0
+            last = +new Date()
+            rtn = func.apply(ctx, args)
+            ctx = null
+            args = null
+        }
+    }
+
+    if(!$.fn.hasOwnProperty('lazyload')){
+
+        $.fn.lazyload = function(options){
+            var $elements = this,
+                isScrollEvent,
+                isScrollTypeEvent,
+                throttleCheckAppear
+
+            if(!$.isPlainObject(options)){
+                options = {}
+            }
+
+            $.each(defaultOptions,function(k,v){
+                if($.inArray(k,['threshold','failure_limit','check_appear_throttle_time']) != -1){ // these params can be a string
+                    if(type(options[k]) == 'String'){
+                        options[k] = parseInt(options[k],10)
+                    }else{
+                        options[k] = v
+                    }
+                }else if(k == 'container'){ // options.container can be a seletor string \ dom \ jQuery object
+                    if(options.hasOwnProperty(k)){   
+                        if(options[k] == w || options[k] == document){
+                            options._$container = $window
+                        }else{
+                            options._$container = $(options[k])
+                        }
+                    }else{
+                        options._$container = $window
+                    }
+                    delete options.container
+                }else if(defaultOptions.hasOwnProperty(k) && (!options.hasOwnProperty(k) || (type(options[k]) != type(defaultOptions[k])))){
+                    options[k] = v
+                }
+            })
+
+            isScrollEvent = options.event == 'scroll'
+            throttleCheckAppear = options.check_appear_throttle_time == 0?
+                checkAppear
+                :throttle(checkAppear,options.check_appear_throttle_time)
+
+            // isScrollTypeEvent cantains custom scrollEvent . Such as 'scrollstart' & 'scrollstop'
+            // https://github.com/search?utf8=%E2%9C%93&q=scrollstart
+            isScrollTypeEvent = isScrollEvent || options.event == 'scrollstart' || options.event == 'scrollstop'
+
+            $elements.each(function(i,e){
+                var element = this,
+                    $element = $elements.eq(i),
+                    placeholderSrc = $element.attr('src'),
+                    originalSrcInAttr = $element.attr('data-'+options.data_attribute), // `data-original` attribute value
+                    originalSrc = options.url_rewriter_fn == emptyFn?
+                        originalSrcInAttr:
+                        options.url_rewriter_fn.call(element,$element,originalSrcInAttr),
+                    originalSrcset = $element.attr('data-'+options.data_srcset_attribute),
+                    isImg = $element.is('img')
+
+                if($element._lazyload_loadStarted == true || placeholderSrc == originalSrc){
+                    $element._lazyload_loadStarted = true
+                    $elements = getUnloadElements($elements)
+                    return
+                }
+
+                $element._lazyload_loadStarted = false
+
+                // If element is an img and no src attribute given, use placeholder. 
+                if(isImg && !placeholderSrc){
+                    // For browsers that do not support data image.
+                    $element.one('error',function(){ // `on` -> `one` : IE6 triggered twice error event sometimes
+                        $element.attr('src',options.placeholder_real_img)
+                    }).attr('src',options.placeholder_data_img)
+                }
+                
+                // When appear is triggered load original image. 
+                $element.one('_lazyload_appear',function(){
+                    var effectParamsIsArray = $.isArray(options.effect_params),
+                        effectIsNotImmediacyShow
+                    function loadFunc(){
+                        // In most situations, the effect is immediacy show, at this time there is no need to hide element first
+                        // Hide this element may cause css reflow, call it as less as possible
+                        if(effectIsNotImmediacyShow){
+                            // todo: opacity:0 for fadeIn effect
+                            $element.hide()
+                        }
+                        if(isImg){
+                            // attr srcset first
+                            if(originalSrcset){
+                                $element.attr('srcset', originalSrcset)
+                            }
+                            if(originalSrc){
+                                $element.attr('src', originalSrc)
+                            }
+                        }else{
+                            $element.css('background-image','url("' + originalSrc + '")')
+                        }
+                        if(effectIsNotImmediacyShow){
+                            $element[options.effect].apply($element,effectParamsIsArray?options.effect_params:[])
+                        }
+                        $elements = getUnloadElements($elements)
+                    }
+                    if(!$element._lazyload_loadStarted){
+                        effectIsNotImmediacyShow = (options.effect != 'show' && $.fn[options.effect] && (!options.effect_params || (effectParamsIsArray && options.effect_params.length == 0)))
+                        if(options.appear != emptyFn){
+                            options.appear.call(element, $element, $elements.length, options)
+                        }
+                        $element._lazyload_loadStarted = true
+                        if(options.no_fake_img_loader || originalSrcset){
+                            if(options.load != emptyFn){
+                                $element.one('load',function(){
+                                    options.load.call(element, $element, $elements.length, options)
+                                })
+                            }
+                            loadFunc()
+                        }else{
+                            $('<img />').one('load', function(){ // `on` -> `one` : IE6 triggered twice load event sometimes
+                                loadFunc()
+                                if(options.load != emptyFn){
+                                    options.load.call(element, $element, $elements.length, options)
+                                }
+                            }).attr('src',originalSrc)
+                        }
+                    }
+                })
+
+                // When wanted event is triggered load original image 
+                // by triggering appear.                              
+                if (!isScrollTypeEvent){
+                    $element.on(options.event, function(){
+                        if (!$element._lazyload_loadStarted){
+                            $element.trigger('_lazyload_appear')
+                        }
+                    })
+                }
+            })
+
+            // Fire one scroll event per scroll. Not one scroll event per image. 
+            if(isScrollTypeEvent){
+                options._$container.on(options.event, function(){
+                    throttleCheckAppear($elements, options)
+                })
+            }
+
+            // Check if something appears when window is resized. 
+            // Force initial check if images should appear when window is onload. 
+            $window.on('resize load', function(){
+                throttleCheckAppear($elements, options)
+            })
+
+            // Force initial check if images should appear. 
+            $(function(){
+                throttleCheckAppear($elements, options)
+            })
+            
+            return this
+        }
+    }
+})

src/main/resources/templates/components/foot-link.html

@@ -4,6 +4,7 @@
 <script charset="utf-8" type="text/javascript" src="/lib/viewer.min.js"></script>
 <script charset="utf-8" type="text/javascript" src="/lib/jquery-confirm.min.js"></script>
 <script charset="utf-8" type="text/javascript" src="/lib/vue2.6.11.min.js"></script>
+<script charset="utf-8" type="text/javascript" src="/lib/lazyload.js"></script>
 <script charset="utf-8" type="text/javascript" th:src="@{/js/common/ajax.service.js(v=${version})}"></script>
 <script charset="utf-8" type="text/javascript" th:src="@{/js/common/serviceapi/utils.service.js(v=${version})}"></script>
 <script charset="utf-8" type="text/javascript" th:src="@{/js/common/serviceapi/shopping.service.js(v=${version})}"></script>

src/main/resources/templates/equipment/list.html

@@ -28,7 +28,7 @@
         <ul class="clear mfw">
             <li class="equipmentItem" v-for="ins in listData">
                 <a :href="'/equipment/detail.html?id='+ins.id" target="_blank">
-                    <img :src="ins.image">
+                    <img src="/img/base/placeholder.png" :data-original="ins.image">
                     <span class="name" v-html="ins.name"></span>
                 </a>
             </li>

src/main/resources/templates/index.html

@@ -59,7 +59,7 @@
                         <li class="swiper-slide productItem mfc" v-for="p in recommends">
                             <div class="item">
                                 <a class="image" :href="'/product-'+p.id+'.html'">
-                                    <img :src="p.image" :alt="p.name">
+                                    <img src="/img/base/placeholder.png" :data-original="p.image" :alt="p.name">
                                     <span v-if="p.actType==1||p.actType==2" :class="p.actType==1?'icon mIcon hot':'icon mIcon new'"></span>
                                 </a>
                                 <a class="name" :href="'/product-'+p.id+'.html'" target="_blank">
@@ -117,7 +117,7 @@
                         <ul class="floorList clear mfw">
                             <li v-for="floor in bigTopic.floorData" style="display: inline-block">
                                 <a :href="floor.link">
-                                    <img :src="floor.image" :alt="floor.title">
+                                    <img src="/img/base/placeholder.png" :data-original="floor.image" :alt="floor.title">
                                     <p v-text="floor.title"></p>
                                 </a>
                             </li>
@@ -135,7 +135,7 @@
                         <ul class="swiper-wrapper" v-cloak>
                             <li class="swiper-slide mfc" v-for="topic in item.floorData">
                                 <a :href="topic.link">
-                                    <img :src="topic.image" :alt="topic.title">
+                                    <img src="/img/base/placeholder.png" :data-original="topic.image" :alt="topic.title">
                                 </a>
                             </li>
                         </ul>
@@ -150,7 +150,7 @@
                 <ul class="mfw">
                     <li v-for="topic in item.floorData" style="display: inline-block">
                         <a :href="topic.link">
-                            <img :src="topic.image" :alt="topic.title">
+                            <img src="/img/base/placeholder.png" :data-original="topic.image" :alt="topic.title">
                             <p v-text="topic.title"></p>
                         </a>
                     </li>
@@ -167,7 +167,7 @@
                             <li><img src="/img/common/goodsup.png"/></li>
                             <li v-for="topic in item.floorData" style="display: inline-block">
                                 <a :href="topic.link">
-                                    <img :src="topic.image" :alt="topic.title">
+                                    <img src="/img/base/placeholder.png" :data-original="topic.image" :alt="topic.title">
                                     <p v-text="topic.title"></p>
                                 </a>
                             </li>
@@ -187,7 +187,7 @@
     <div id="advertising">
         <div class="item" v-for="ad in advertising">
             <a :href="ad.link" target="_blank">
-                <img :src="ad.image" :alt="ad.title">
+                <img src="/img/base/placeholder.png" :data-original="ad.image" :alt="ad.title">
             </a>
             <span class="close"></span>
         </div>

src/main/resources/templates/product/list.html

@@ -103,7 +103,7 @@
             <li class="productItem mfc" v-for="p in listData">
                 <div class="item">
                     <a class="image" :href="'/product-'+p.id+'.html'">
-                        <img :src="p.image" :alt="p.name">
+                        <img src="/img/base/placeholder.png" :data-original="p.image" :alt="p.name">
                     </a>
                     <a class="name" :href="'/product-'+p.id+'.html'">
                         <span v-html="p.name"></span>

src/main/resources/templates/supplier/index.html

@@ -18,7 +18,7 @@
             <ul class="swiper-wrapper">
             <template v-if="supplierBanner.length>0">
                 <li class="swiper-slide mfc" v-for="imgUrl in supplierBanner">
-                    <img :src="imgUrl">
+                    <img src="/img/base/placeholder.png" :data-original="imgUrl">
                 </li>
             </template>
             <template v-else>
@@ -107,7 +107,7 @@
                         <li class="productItem mfc" v-for="p in productLists">
                             <div class="item">
                                 <a class="image" :href="'/product-'+p.id+'.html'">
-                                    <img :src="p.image" :alt="p.name">
+                                    <img src="/img/base/placeholder.png" :data-original="p.image" :alt="p.name">
                                     <span v-if="p.actType==1||p.actType==2" :class="p.actType==1?'icon mIcon hot':'icon mIcon new'"></span>
                                 </a>
                                 <a class="name" :href="'/product-'+p.id+'.html'">

src/main/resources/templates/supplier/list.html

@@ -28,7 +28,7 @@
         <li class="supplierItem clear" v-for="shop in listData">
             <div class="left">
                 <a :href="'/supplier/index.html?id='+shop.id" target="_blank" class="logo">
-                    <img :src="shop.logo">
+                    <img src="/img/base/placeholder.png" :data-original="shop.logo">
                 </a>
                 <h5><a :href="'/supplier/index.html?id='+shop.id" :title="shop.name" target="_blank">
                     <span v-html="shop.name"></span>
@@ -46,7 +46,7 @@
                     <template v-if="shop.productList && shop.productList.length>0">
                         <li v-for="product in shop.productList">
                             <a :href="'/product-'+product.id+'.html'" target="_blank">
-                                <img :src="product.image">
+                                <img src="/img/base/placeholder.png" :data-original="product.image">
                                 <span v-html="product.name"></span>
                             </a>
                         </li>