Authored by yyq

图片懒加载

... ... @@ -5,6 +5,7 @@
*/
'use strict';
const _ = require('lodash');
const Item = require('../models/item');
const index = (req, res, next) => {
... ... @@ -241,6 +242,9 @@ const index = (req, res, next) => {
// };
Item.getProductItemData(req.params).then(result => {
if (_.isEmpty(result)) {
return next();
}
res.display('item', result);
}).catch(next);
};
... ...
... ... @@ -93,7 +93,7 @@ const setPathNav = (data, name) => {
*/
const setBrandBanner = brand => {
let data = {
bgColor: '#93897d',
bgColor: '#000',
brandLogo: {
link: `#${brand.brandDomain}`, // 品牌跳转链接 -- 待处理
img: brand.brandIco
... ... @@ -358,7 +358,7 @@ const setMaterialData = sizeInfo => {
let detail = [];
_.forEach(sizeInfo.productMaterialList, value => {
material.detail.push({
detail.push({
img: value.imageUrl,
name: value.caption,
enName: value.encaption,
... ... @@ -533,17 +533,23 @@ const setDetailData = sizeInfo => {
}
// 图片换规则
const replacePairs = {
'<img src=': '<img class="lazy" src="data:image/gif;base64,R0lGODlhAQABAJEAAAAAAP///93d3f' +
'///yH5BAEAAAMALAAAAAABAAEAAAICVAEAOw==" data-original=',
'<img border="0" src=': '<img border="0" class="lazy" src="data:image/gif;base64,R0lGODlhAQABAJEAAAAAAP' +
const replacePairs = [
{
reg: /<img src=/g,
str: '<img class="lazy" src="data:image/gif;base64,R0lGODlhAQABAJEAAAAAAP///93d3f' +
'///yH5BAEAAAMALAAAAAABAAEAAAICVAEAOw==" data-original='
},
{
reg: /<img border="0" src=/g,
str: '<img border="0" class="lazy" src="data:image/gif;base64,R0lGODlhAQABAJEAAAAAAP' +
'///93d3f///yH5BAEAAAMALAAAAAABAAEAAAICVAEAOw==" data-original='
};
}
];
let content = sizeInfo.productIntroBo.productIntro;
// 图片换成懒加载方式
_.forEach(replacePairs, (value, key) => {
content = _.replace(content, key, value);
_.forEach(replacePairs, value => {
content = _.replace(content, value.reg, value.str);
});
details.content += content;
... ...
... ... @@ -75,7 +75,7 @@ let getProductItemData = (params) => {
Object.assign(data, itemFUN.setMaterialData(mulRes.sizeInfo));
// SIZEINFO尺码信息
Object.assign(data, itemFUN.setSizeData(mulRes.sizeInfo));
Object.assign(data, itemFUN.setSizeData(mulRes.sizeInfo, mulRes.modelTry));
// DETAILS商品详情
Object.assign(data, itemFUN.setDetailData(mulRes.sizeInfo));
... ...
... ... @@ -270,6 +270,10 @@
margin-left: 20px;
}
}
.detail-content {
text-align: center;
}
}
.info-block {
... ...