wangshusheng / YOHOBUYPC · Commits

Go to a project

Authored by unknown
Commit 2741c4044308a0d9486e9ba9270325e07e44d8de 1 parent 331b0b76

图片懒加载

Inline Side-by-side
Showing 4 changed files with 71 additions and 13 deletions
@@ -10,7 +10,7 @@ @@ -10,7 +10,7 @@
10 {{# bigSlide}} 10 {{# bigSlide}}
11 <li> 11 <li>
12 <a href="{{href}}"> 12 <a href="{{href}}">
13 - <img src="{{img}}" alt=""> 13 + <img class="lazy" data-original="{{img}}" alt="">
14 </a> 14 </a>
15 </li> 15 </li>
16 {{/ bigSlide}} 16 {{/ bigSlide}}
1 -var $ = require('yoho.jquery'); 1 +var $ = require('yoho.jquery'),
  2 + lazyLoad = require('yoho.lazyload');
2 3
3 (function($) { 4 (function($) {
4 var LinkageSlider = function(element, options) { 5 var LinkageSlider = function(element, options) {
@@ -64,6 +65,11 @@ var $ = require('yoho.jquery'); @@ -64,6 +65,11 @@ var $ = require('yoho.jquery');
64 this._slideShow(); 65 this._slideShow();
65 }, 66 },
66 _slideShow: function() { 67 _slideShow: function() {
  68 + var $img = this.bigItem.eq(this.index).find('img.lazy');
  69 +
  70 + if ($img.attr('src') !== $img.data('original')) {
  71 + lazyLoad($img.trigger('appear'));
  72 + }
67 this.smallItem.eq(this.index).addClass('focus').siblings().removeClass('focus'); 73 this.smallItem.eq(this.index).addClass('focus').siblings().removeClass('focus');
68 this.bigItem.eq(this.index).fadeIn().siblings().fadeOut(); 74 this.bigItem.eq(this.index).fadeIn().siblings().fadeOut();
69 }, 75 },
@@ -12,7 +12,7 @@ require('../common/linkage-slider'); @@ -12,7 +12,7 @@ require('../common/linkage-slider');
12 require('../common/slider2'); 12 require('../common/slider2');
13 require('../common/new-arrivls'); 13 require('../common/new-arrivls');
14 14
15 -lazyLoad(); 15 +lazyLoad($('img.lazy'));
16 $('.slide-container').linkageSlider(); 16 $('.slide-container').linkageSlider();
17 $('.img-brand').slider2(); 17 $('.img-brand').slider2();
18 18
@@ -25,6 +25,16 @@ $.ajax({ @@ -25,6 +25,16 @@ $.ajax({
25 var brandTpl, 25 var brandTpl,
26 brandHtml; 26 brandHtml;
27 27
  28 + function brandShow(hidePage, showPage) {
  29 + lazyLoad($('li[data-page=' + showPage + ']').find('img.lazy').trigger('appear'));
  30 + $('.logo-brand').find('li[data-page=' + hidePage + ']').find('img').fadeOut('normal', function() {
  31 + $('.logo-brand').find('li').hide();
  32 +
  33 + $('.logo-brand').find('li[data-page=' + showPage + ']').show().find('img').fadeIn();
  34 + });
  35 +
  36 + }
  37 +
28 Handlebars.registerHelper('brandList', function(items, options) { 38 Handlebars.registerHelper('brandList', function(items, options) {
29 var out = '<ul>', 39 var out = '<ul>',
30 i = 0, 40 i = 0,
@@ -56,10 +66,11 @@ $.ajax({ @@ -56,10 +66,11 @@ $.ajax({
56 66
57 }); 67 });
58 brandHtml = '\{{#brandList logoBrand}}' + 68 brandHtml = '\{{#brandList logoBrand}}' +
59 - '<a href="\{{href}}"><img src="\{{img}}" alt=""></a>' + 69 + '<a href="\{{href}}"><img class="lazy" data-original="\{{img}}" alt=""></a>' +
60 '\{{/brandList}}'; 70 '\{{/brandList}}';
61 brandTpl = Handlebars.compile(brandHtml); 71 brandTpl = Handlebars.compile(brandHtml);
62 $('.logo-brand').html(brandTpl(data)); 72 $('.logo-brand').html(brandTpl(data));
  73 + lazyLoad($('.logo-brand').find('img.lazy'));
63 74
64 //品牌翻页 75 //品牌翻页
65 $('.logo-brand').on('click', '.next', function() { 76 $('.logo-brand').on('click', '.next', function() {
@@ -72,10 +83,7 @@ $.ajax({ @@ -72,10 +83,7 @@ $.ajax({
72 } else { 83 } else {
73 nextPage = page + 1; 84 nextPage = page + 1;
74 } 85 }
75 - $('.logo-brand').find('li[data-page=' + page + ']').find('img').fadeOut('normal', function() {  
76 - $('.logo-brand').find('li').hide();  
77 - $('.logo-brand').find('li[data-page=' + nextPage + ']').show().find('img').fadeIn();  
78 - }); 86 + brandShow(page, nextPage);
79 }); 87 });
80 88
81 $('.logo-brand').on('click', '.prev', function() { 89 $('.logo-brand').on('click', '.prev', function() {
@@ -88,11 +96,7 @@ $.ajax({ @@ -88,11 +96,7 @@ $.ajax({
88 } else { 96 } else {
89 prevPage = page - 1; 97 prevPage = page - 1;
90 } 98 }
91 -  
92 - $('.logo-brand').find('li[data-page=' + page + ']').find('img').fadeOut('normal', function() {  
93 - $('.logo-brand').find('li').hide();  
94 - $('.logo-brand').find('li[data-page=' + prevPage + ']').show().find('img').fadeIn();  
95 - }); 99 + brandShow(page, prevPage);
96 }); 100 });
97 } 101 }
98 }); 102 });
@@ -274,6 +274,30 @@ class BoysController extends AbstractAction @@ -274,6 +274,30 @@ class BoysController extends AbstractAction
274 array( 274 array(
275 'href' => '/?gender=1,3', 275 'href' => '/?gender=1,3',
276 'img' => 'http://img12.static.yhbimg.com/taobaocms/2015/11/27/09/02a4f1c10e1e81574520e5c0239741a076.jpg' 276 'img' => 'http://img12.static.yhbimg.com/taobaocms/2015/11/27/09/02a4f1c10e1e81574520e5c0239741a076.jpg'
  277 + ),
  278 + array(
  279 + 'href' => '/?gender=1,3',
  280 + 'img' => 'http://img10.static.yhbimg.com/taobaocms/2015/11/26/12/01c3b99f554ad50d9e5a9900719715c94c.jpg'
  281 + ),
  282 + array(
  283 + 'href' => '/?gender=1,3',
  284 + 'img' => 'http://img12.static.yhbimg.com/taobaocms/2015/11/27/09/02a4f1c10e1e81574520e5c0239741a076.jpg'
  285 + ),
  286 + array(
  287 + 'href' => '/?gender=1,3',
  288 + 'img' => 'http://img10.static.yhbimg.com/taobaocms/2015/11/26/12/01c3b99f554ad50d9e5a9900719715c94c.jpg'
  289 + ),
  290 + array(
  291 + 'href' => '/?gender=1,3',
  292 + 'img' => 'http://img12.static.yhbimg.com/taobaocms/2015/11/27/09/02a4f1c10e1e81574520e5c0239741a076.jpg'
  293 + ),
  294 + array(
  295 + 'href' => '/?gender=1,3',
  296 + 'img' => 'http://img10.static.yhbimg.com/taobaocms/2015/11/26/12/01c3b99f554ad50d9e5a9900719715c94c.jpg'
  297 + ),
  298 + array(
  299 + 'href' => '/?gender=1,3',
  300 + 'img' => 'http://img12.static.yhbimg.com/taobaocms/2015/11/27/09/02a4f1c10e1e81574520e5c0239741a076.jpg'
277 ) 301 )
278 ), 302 ),
279 'smallSlide' => array( 303 'smallSlide' => array(
@@ -284,6 +308,30 @@ class BoysController extends AbstractAction @@ -284,6 +308,30 @@ class BoysController extends AbstractAction
284 array( 308 array(
285 'href' => 'http://sale.yohobuy.com/?specialsale_id=13&gender=1,3', 309 'href' => 'http://sale.yohobuy.com/?specialsale_id=13&gender=1,3',
286 'img' => 'http://img10.static.yhbimg.com/taobaocms/2015/11/27/09/015b6a29ee526edeaacd13f4a7c81475f0.jpg?imageMogr2/thumbnail/138x54/extent/138x54/background/d2hpdGU=/position/center/quality/90' 310 'img' => 'http://img10.static.yhbimg.com/taobaocms/2015/11/27/09/015b6a29ee526edeaacd13f4a7c81475f0.jpg?imageMogr2/thumbnail/138x54/extent/138x54/background/d2hpdGU=/position/center/quality/90'
  311 + ),
  312 + array(
  313 + 'href' => 'http://sale.yohobuy.com/?specialsale_id=13&gender=1,3',
  314 + 'img' => 'http://img13.static.yhbimg.com/taobaocms/2015/11/26/12/024a810cfa89d67569c6c3bacedba8869a.jpg?imageMogr2/thumbnail/138x54/extent/138x54/background/d2hpdGU=/position/center/quality/90'
  315 + ),
  316 + array(
  317 + 'href' => 'http://sale.yohobuy.com/?specialsale_id=13&gender=1,3',
  318 + 'img' => 'http://img10.static.yhbimg.com/taobaocms/2015/11/27/09/015b6a29ee526edeaacd13f4a7c81475f0.jpg?imageMogr2/thumbnail/138x54/extent/138x54/background/d2hpdGU=/position/center/quality/90'
  319 + ),
  320 + array(
  321 + 'href' => 'http://sale.yohobuy.com/?specialsale_id=13&gender=1,3',
  322 + 'img' => 'http://img13.static.yhbimg.com/taobaocms/2015/11/26/12/024a810cfa89d67569c6c3bacedba8869a.jpg?imageMogr2/thumbnail/138x54/extent/138x54/background/d2hpdGU=/position/center/quality/90'
  323 + ),
  324 + array(
  325 + 'href' => 'http://sale.yohobuy.com/?specialsale_id=13&gender=1,3',
  326 + 'img' => 'http://img10.static.yhbimg.com/taobaocms/2015/11/27/09/015b6a29ee526edeaacd13f4a7c81475f0.jpg?imageMogr2/thumbnail/138x54/extent/138x54/background/d2hpdGU=/position/center/quality/90'
  327 + ),
  328 + array(
  329 + 'href' => 'http://sale.yohobuy.com/?specialsale_id=13&gender=1,3',
  330 + 'img' => 'http://img13.static.yhbimg.com/taobaocms/2015/11/26/12/024a810cfa89d67569c6c3bacedba8869a.jpg?imageMogr2/thumbnail/138x54/extent/138x54/background/d2hpdGU=/position/center/quality/90'
  331 + ),
  332 + array(
  333 + 'href' => 'http://sale.yohobuy.com/?specialsale_id=13&gender=1,3',
  334 + 'img' => 'http://img10.static.yhbimg.com/taobaocms/2015/11/27/09/015b6a29ee526edeaacd13f4a7c81475f0.jpg?imageMogr2/thumbnail/138x54/extent/138x54/background/d2hpdGU=/position/center/quality/90'
287 ) 335 )
288 ) 336 )
289 ) 337 )