Authored by unknown

图片懒加载

... ... @@ -10,7 +10,7 @@
{{# bigSlide}}
<li>
<a href="{{href}}">
<img src="{{img}}" alt="">
<img class="lazy" data-original="{{img}}" alt="">
</a>
</li>
{{/ bigSlide}}
... ...
var $ = require('yoho.jquery');
var $ = require('yoho.jquery'),
lazyLoad = require('yoho.lazyload');
(function($) {
var LinkageSlider = function(element, options) {
... ... @@ -64,6 +65,11 @@ var $ = require('yoho.jquery');
this._slideShow();
},
_slideShow: function() {
var $img = this.bigItem.eq(this.index).find('img.lazy');
if ($img.attr('src') !== $img.data('original')) {
lazyLoad($img.trigger('appear'));
}
this.smallItem.eq(this.index).addClass('focus').siblings().removeClass('focus');
this.bigItem.eq(this.index).fadeIn().siblings().fadeOut();
},
... ...
... ... @@ -12,7 +12,7 @@ require('../common/linkage-slider');
require('../common/slider2');
require('../common/new-arrivls');
lazyLoad();
lazyLoad($('img.lazy'));
$('.slide-container').linkageSlider();
$('.img-brand').slider2();
... ... @@ -25,6 +25,16 @@ $.ajax({
var brandTpl,
brandHtml;
function brandShow(hidePage, showPage) {
lazyLoad($('li[data-page=' + showPage + ']').find('img.lazy').trigger('appear'));
$('.logo-brand').find('li[data-page=' + hidePage + ']').find('img').fadeOut('normal', function() {
$('.logo-brand').find('li').hide();
$('.logo-brand').find('li[data-page=' + showPage + ']').show().find('img').fadeIn();
});
}
Handlebars.registerHelper('brandList', function(items, options) {
var out = '<ul>',
i = 0,
... ... @@ -56,10 +66,11 @@ $.ajax({
});
brandHtml = '\{{#brandList logoBrand}}' +
'<a href="\{{href}}"><img src="\{{img}}" alt=""></a>' +
'<a href="\{{href}}"><img class="lazy" data-original="\{{img}}" alt=""></a>' +
'\{{/brandList}}';
brandTpl = Handlebars.compile(brandHtml);
$('.logo-brand').html(brandTpl(data));
lazyLoad($('.logo-brand').find('img.lazy'));
//品牌翻页
$('.logo-brand').on('click', '.next', function() {
... ... @@ -72,10 +83,7 @@ $.ajax({
} else {
nextPage = page + 1;
}
$('.logo-brand').find('li[data-page=' + page + ']').find('img').fadeOut('normal', function() {
$('.logo-brand').find('li').hide();
$('.logo-brand').find('li[data-page=' + nextPage + ']').show().find('img').fadeIn();
});
brandShow(page, nextPage);
});
$('.logo-brand').on('click', '.prev', function() {
... ... @@ -88,11 +96,7 @@ $.ajax({
} else {
prevPage = page - 1;
}
$('.logo-brand').find('li[data-page=' + page + ']').find('img').fadeOut('normal', function() {
$('.logo-brand').find('li').hide();
$('.logo-brand').find('li[data-page=' + prevPage + ']').show().find('img').fadeIn();
});
brandShow(page, prevPage);
});
}
});
... ...
... ... @@ -274,6 +274,30 @@ class BoysController extends AbstractAction
array(
'href' => '/?gender=1,3',
'img' => 'http://img12.static.yhbimg.com/taobaocms/2015/11/27/09/02a4f1c10e1e81574520e5c0239741a076.jpg'
),
array(
'href' => '/?gender=1,3',
'img' => 'http://img10.static.yhbimg.com/taobaocms/2015/11/26/12/01c3b99f554ad50d9e5a9900719715c94c.jpg'
),
array(
'href' => '/?gender=1,3',
'img' => 'http://img12.static.yhbimg.com/taobaocms/2015/11/27/09/02a4f1c10e1e81574520e5c0239741a076.jpg'
),
array(
'href' => '/?gender=1,3',
'img' => 'http://img10.static.yhbimg.com/taobaocms/2015/11/26/12/01c3b99f554ad50d9e5a9900719715c94c.jpg'
),
array(
'href' => '/?gender=1,3',
'img' => 'http://img12.static.yhbimg.com/taobaocms/2015/11/27/09/02a4f1c10e1e81574520e5c0239741a076.jpg'
),
array(
'href' => '/?gender=1,3',
'img' => 'http://img10.static.yhbimg.com/taobaocms/2015/11/26/12/01c3b99f554ad50d9e5a9900719715c94c.jpg'
),
array(
'href' => '/?gender=1,3',
'img' => 'http://img12.static.yhbimg.com/taobaocms/2015/11/27/09/02a4f1c10e1e81574520e5c0239741a076.jpg'
)
),
'smallSlide' => array(
... ... @@ -284,6 +308,30 @@ class BoysController extends AbstractAction
array(
'href' => 'http://sale.yohobuy.com/?specialsale_id=13&gender=1,3',
'img' => 'http://img10.static.yhbimg.com/taobaocms/2015/11/27/09/015b6a29ee526edeaacd13f4a7c81475f0.jpg?imageMogr2/thumbnail/138x54/extent/138x54/background/d2hpdGU=/position/center/quality/90'
),
array(
'href' => 'http://sale.yohobuy.com/?specialsale_id=13&gender=1,3',
'img' => 'http://img13.static.yhbimg.com/taobaocms/2015/11/26/12/024a810cfa89d67569c6c3bacedba8869a.jpg?imageMogr2/thumbnail/138x54/extent/138x54/background/d2hpdGU=/position/center/quality/90'
),
array(
'href' => 'http://sale.yohobuy.com/?specialsale_id=13&gender=1,3',
'img' => 'http://img10.static.yhbimg.com/taobaocms/2015/11/27/09/015b6a29ee526edeaacd13f4a7c81475f0.jpg?imageMogr2/thumbnail/138x54/extent/138x54/background/d2hpdGU=/position/center/quality/90'
),
array(
'href' => 'http://sale.yohobuy.com/?specialsale_id=13&gender=1,3',
'img' => 'http://img13.static.yhbimg.com/taobaocms/2015/11/26/12/024a810cfa89d67569c6c3bacedba8869a.jpg?imageMogr2/thumbnail/138x54/extent/138x54/background/d2hpdGU=/position/center/quality/90'
),
array(
'href' => 'http://sale.yohobuy.com/?specialsale_id=13&gender=1,3',
'img' => 'http://img10.static.yhbimg.com/taobaocms/2015/11/27/09/015b6a29ee526edeaacd13f4a7c81475f0.jpg?imageMogr2/thumbnail/138x54/extent/138x54/background/d2hpdGU=/position/center/quality/90'
),
array(
'href' => 'http://sale.yohobuy.com/?specialsale_id=13&gender=1,3',
'img' => 'http://img13.static.yhbimg.com/taobaocms/2015/11/26/12/024a810cfa89d67569c6c3bacedba8869a.jpg?imageMogr2/thumbnail/138x54/extent/138x54/background/d2hpdGU=/position/center/quality/90'
),
array(
'href' => 'http://sale.yohobuy.com/?specialsale_id=13&gender=1,3',
'img' => 'http://img10.static.yhbimg.com/taobaocms/2015/11/27/09/015b6a29ee526edeaacd13f4a7c81475f0.jpg?imageMogr2/thumbnail/138x54/extent/138x54/background/d2hpdGU=/position/center/quality/90'
)
)
)
... ...