fe / yohobuywap-node · Commits

Go to a project

Authored by 郝肖肖
Commit a36342f273ca3c54d5e0c5f15702080851951193 1 parent 4a0fef30

swiper set lazy

Inline Side-by-side
Showing 6 changed files with 24 additions and 96 deletions
... ... @@ -16,48 +16,6 @@
</a>
</li>
{{/list}}
<!--<li class="hot-single-goods">
<img src="" alt="goods" class="goods-pic">
<div class="goods-info">
<h3 class="price">&yen; 188.00</h3>
<p class="view-num">22人</p>
<p class="view-status">已加入收藏</p>
</div>
</li>
<li class="hot-single-goods">
<img src="" alt="goods" class="goods-pic">
<div class="goods-info">
<h3 class="price">&yen; 188.00</h3>
<img src="" alt="little-head-icon" class="head-icon">
<p class="view-num view-margin">大大王</p>
<p class="view-status view-margin">10分钟前购买</p>
</div>
</li>
<li class="hot-single-goods">
<img src="" alt="goods" class="goods-pic">
<div class="goods-info">
<h3 class="price">&yen; 188.00</h3>
<p class="view-num">12人</p>
<p class="view-status">正在浏览</p>
</div>
</li>
<li class="hot-single-goods">
<img src="" alt="goods" class="goods-pic">
<div class="goods-info">
<h3 class="price">&yen; 188.00</h3>
<p class="view-num">22人</p>
<p class="view-status">已加入收藏</p>
</div>
</li>
<li class="hot-single-goods">
<img src="" alt="goods" class="goods-pic">
<div class="goods-info">
<h3 class="price">&yen; 188.00</h3>
<img src="" alt="little-head-icon" class="head-icon">
<p class="view-num view-margin">大大王</p>
<p class="view-status view-margin">10分钟前购买</p>
</div>
</li>-->
</ul>
</div>
</div>
... ...
... ... @@ -8,7 +8,7 @@
{{# bigList}}
<li class="swiper-slide">
<a href="{{url}}">
<img src="{{image src 640 403}}" alt="{{title}}">
<img class="swiper-lazy" data-src="{{image src 640 403}}" alt="{{title}}">
</a>
</li>
{{/ bigList}}
... ...
... ... @@ -16,48 +16,6 @@
</a>
</li>
{{/list}}
<!--<li class="hot-single-goods">
<img src="" alt="goods" class="goods-pic">
<div class="goods-info">
<h3 class="price">&yen; 188.00</h3>
<p class="view-num">22人</p>
<p class="view-status">已加入收藏</p>
</div>
</li>
<li class="hot-single-goods">
<img src="" alt="goods" class="goods-pic">
<div class="goods-info">
<h3 class="price">&yen; 188.00</h3>
<img src="" alt="little-head-icon" class="head-icon">
<p class="view-num view-margin">大大王</p>
<p class="view-status view-margin">10分钟前购买</p>
</div>
</li>
<li class="hot-single-goods">
<img src="" alt="goods" class="goods-pic">
<div class="goods-info">
<h3 class="price">&yen; 188.00</h3>
<p class="view-num">12人</p>
<p class="view-status">正在浏览</p>
</div>
</li>
<li class="hot-single-goods">
<img src="" alt="goods" class="goods-pic">
<div class="goods-info">
<h3 class="price">&yen; 188.00</h3>
<p class="view-num">22人</p>
<p class="view-status">已加入收藏</p>
</div>
</li>
<li class="hot-single-goods">
<img src="" alt="goods" class="goods-pic">
<div class="goods-info">
<h3 class="price">&yen; 188.00</h3>
<img src="" alt="little-head-icon" class="head-icon">
<p class="view-num view-margin">大大王</p>
<p class="view-status view-margin">10分钟前购买</p>
</div>
</li>-->
</ul>
</div>
</div>
... ...
... ... @@ -4,19 +4,19 @@
{{#banner_image}}
<li class="swiper-slide">
<a href="{{url}}">
<img src="{{image src 640 200}}" alt="">
<img class="swiper-lazy" data-src="{{image src 640 200}}" alt="">
</a>
</li>
{{/banner_image}}
</ul>
{{else}}
{{#banner_image}}
<div class="banner-list">
<a href="{{url}}">
<img src="{{image src 640 200}}" alt="">
</a>
</div>
{{/banner_image}}
{{#banner_image}}
<div class="banner-list">
<a href="{{url}}">
<img class="lazy" data-original="{{image src 640 200}}" alt="">
</a>
</div>
{{/banner_image}}
{{/if}}
<div class="swiper-pagination" {{#if banner_image.[1]}}style="display:block"{{/if}}>
<div class="pagination-inner">
... ...
... ... @@ -16,19 +16,19 @@
</div>
<span class="faved-num"></span>
<a href="{{url}}">
<img src="{{image src 362 174}}" alt="banner" class="top">
<img class="swiper-lazy" data-src="{{image src 362 174}}" alt="banner" class="top">
</a>
{{#goods0}}
<a href="{{url}}">
<div class="bottom left">
<img src="{{image src 138 183}}" alt="left">
<img class="swiper-lazy" data-src="{{image src 138 183}}" alt="left">
</div>
</a>
{{/goods0}}
{{#goods1}}
<a href="{{url}}">
<div class="bottom right">
<img src="{{image src 138 183}}" alt="right">
<img class="swiper-lazy" data-src="{{image src 138 183}}" alt="right">
</div>
</a>
{{/goods1}}
... ...
... ... @@ -174,6 +174,10 @@ function ajaxResource() {
$('.banner-center-swiper').each(function() {
if ($(this).find('li').size() > 1) {
new Swiper('.banner-center-swiper', {
preloadImages: false,
lazyLoading: true,
lazyLoadingInPrevNext: true,
lazyLoadingOnTransitionStart: true,
loop: true,
autoplay: 3000,
autoplayDisableOnInteraction: false,
... ... @@ -236,6 +240,10 @@ function ajaxResource() {
$(this).addClass(swiperClass);
if ($('.' + swiperClass).find('.swiper-slide').size() > 1) {
new Swiper('.' + swiperClass, {
preloadImages: false,
lazyLoading: true,
lazyLoadingInPrevNext: true,
lazyLoadingOnTransitionStart: true,
loop: true,
autoplay: 3000,
autoplayDisableOnInteraction: false,
... ... @@ -249,6 +257,10 @@ function ajaxResource() {
// 店铺推荐滑动效果
if ($('.shop-recom-swiper-container').find('li').length > 1) {
new Swiper('.shop-recom-swiper-container', {
preloadImages: false,
lazyLoading: true,
lazyLoadingInPrevNext: true,
lazyLoadingOnTransitionStart: true,
centeredSlides: true,
slidesPerView: 'auto',
paginationClickable: true,
... ...