图片太多，加载慢，我用了layui里的方式，放在服务器后还是太慢！怎么解决？？？有没有什么优化的技巧？？？
0
悬赏园豆：50
[已解决问题]
解决于 2018-12-06 15:52
怎么解决怎么解决怎么解决怎么解决怎么解决怎么解决怎么解决怎么解决怎么解决怎么解决怎么解决怎么解决怎么解决怎么解决怎么解决怎么解决怎么解决？？？？？？？
<div class="htmleaf-content bgcolor-3">
<div id="div1">
</div>
</div><script>
layui.use(['layer','flow'], function(){
var layer = layui.layer;
flow=layui.flow;
flow.lazyimg({
elem:"#div1 img",
});
flow.load({
elem: '#div1', //指定列表容器
isLazyimg:true,
done: function(page, next){ //到达临界点（默认滚动触发），触发下一页
var lis = [];
//以jQuery的Ajax请求为例，请求下一页数据（注意：page是从2开始返回）
$.get('backstageImgList.php?page='+page, function(res){
//假设你的列表返回在data集合中
res=JSON.parse(res)
console.log(res)
layui.each(res.data.result, function(index, item){
console.log(item)
//lis.push('<p>'+ item.title +'</p>');
var imgArray = "<?php echo (implode(",", $img_id_array)); ?>".split(',');
var dzStatus = $.inArray(item[0], imgArray) != -1 ? "icon-dianzan" : "icon-dianzan2";
var templ = '<div id="ysee" class="box" style="cursor:pointer;margin-left: 5px ;margin-top: 5px ;">' +
'<img lay-src="/TPWang/admin/upload/' + item[2] + '" alt="">'+
'<div id="btn" onclick="test(this,' + item[0] + ')">' +
'<i class="iconfont ' + dzStatus + '"></i>' +
'</div>' +
'</div>';
lis.push(templ);
});
//执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
//pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
console.log(res.count[0][0])
next(lis.join(''), page < res.count[0][0]);
});
}
});
//按屏加载图片
flow.lazyimg({
elem: '#ysee img'
});
layer.photos({
photos:'#div1'
})
});
</script>
<script type="text/javascript">
function test(obj, id) {
//debugger
var g = 0;
var _class = obj.getElementsByTagName('i')[0].classList;
for (var i = 0; i < _class.length; i++) {
if (_class[i] == 'icon-dianzan') {
g = 1;
break;
}
}
$.ajax({
//post提交
type: "post",
//提交给.php页面处理
url: "ajax_love.php",
dataType: "JSON",
async: true, //是否异步
data: {
id: id, //需要提交的数据
g: g
},
success: function (data) { //成功
//debugger;
if (data == 1) {
obj.getElementsByTagName('i')[0].classList.remove('icon-dianzan2');
obj.getElementsByTagName('i')[0].classList.add('icon-dianzan');
obj.getElementsByTagName('i')[0].style.color = 'red';
} else if (data == 2) {
obj.getElementsByTagName('i')[0].classList.remove('icon-dianzan');
obj.getElementsByTagName('i')[0].classList.add('icon-dianzan2');
obj.getElementsByTagName('i')[0].style.color = 'red';
} else if (data == -2) {
alert('你已经没有票数了！')
}
if (data == 0) {
alert('你已经点过赞啦！')
}
}
});
}
</script>
最佳答案
0
对楼上的回答补充一下：
1：懒加载 默认图片的 src是空的 添加已扩展属性 data-src=‘真实地址’。
当页面到了可视化区域加载。
2：可以考虑多张图片合并 百度搜索 css精灵 。
3：图片缓存 参考xx网 webapp开发 图片优化 第一次加载后 转化成 base64 保存到 localStorage 在刷新的时候直接取 localStorage
目前本人采用的方式就是第3种：
img写法：
<img class="outLogin lazyload" src="" id="cost-zh_1" data-src="/xxx/expenditure.png" />
4:只有上面的单独放一个服务器 一般公司用不到 。 中小公司基本忽略。
收获园豆：50
其他回答(3)
0
提高服务器带宽
0
1.图片让开发压缩一下放到服务器
2.静态图片资源采用cdn加速
压缩之后图片会不会不清晰或者损坏？？？
@yyy003: 不会啊 你压到自己能接受的程度就行
@yyy003: 并且 最好静态资源放到一台单独的服务器上，或者使用云服务商的对象存储
0
可以做懒加载
