流加载第一页无法懒加载,无法利用相册弹出层。

未结贴
1 285
遇到两个问题求指教:
1,利用流加载的读取相片,用懒加载的方式,默认第一屏不显示图片,要随意滚动鼠标过后才显示图片,之后就一切正常,求解。

2,利用流加载读取图片,利用layer.photo弹层的相册层,无法使用。必须在DIV容器里面放入一张图片才有用。

这样无法弹出图片层:
	      $.getJSON('list.asp?page=' + page, function(res){
//假设你的列表返回在data集合中
layui.each(res.data, function(index, item){
lis.push('<div id="photo"><img src="' + item.dizhi + '" layer-src="' + item.dizhi + '" width="330" height="330" /></div>');
});

//执行下一页渲染,第二参数为:满足“加载更多”的条件,即后面仍有分页
//pages为Ajax返回的总页数,只有当前页小于总页数的情况下,才会继续出现加载更多
next(lis.join(''), page < 6);
});
}
});
});

layui.use('flow', function(){
var flow = layui.flow;
//当你执行这样一个方法时,即对页面中的全部带有lay-src的img元素开启了懒加载(当然你也可以指定相关img)
flow.lazyimg();
});

layui.use('layer',function(){
var layer = layui.layer;
layer.photos ({
photos:'#con'
,anim:5
});
});
</script>
<div id="con"></div>
而改成以下后就行:
	      $.getJSON('list.asp?page=' + page, function(res){
//假设你的列表返回在data集合中
layui.each(res.data, function(index, item){
lis.push('<div id="photo"><img src="' + item.dizhi + '" layer-src="' + item.dizhi + '" width="330" height="330" /></div>');
});

//执行下一页渲染,第二参数为:满足“加载更多”的条件,即后面仍有分页
//pages为Ajax返回的总页数,只有当前页小于总页数的情况下,才会继续出现加载更多
next(lis.join(''), page < 6);
});
}
});
});

layui.use('flow', function(){
var flow = layui.flow;
//当你执行这样一个方法时,即对页面中的全部带有lay-src的img元素开启了懒加载(当然你也可以指定相关img)
flow.lazyimg();
});

layui.use('layer',function(){
var layer = layui.layer;
layer.photos ({
photos:'#con'
,anim:5
});
});
</script>
<div id="con"><div id="photo"><img src="' + item.dizhi + '" layer-src="' + item.dizhi + '" width="330" height="330" /></div></div>
差别就在ID为CON的层里面预先放置一张图片。
求大神解释一下。
  • 贤心 贤心 (管理员)
    2017-01-11 12:27:19
    模块为毛不放在同一个 layui.use 里面?
    layui.use(['flow', 'layer'], function(){
    var flow = layui.flow;
    var layer = layui.layer;
    //当你执行这样一个方法时,即对页面中的全部带有lay-src的img元素开启了懒加载(当然你也可以指定相关img)
    flow.lazyimg();

    layer.photos ({
    photos:'#con'
    ,anim:5
    });
    });
    0 回复
最近热帖
layui所在服务器近期连续遭受DDoS攻击 3322
vip-admin Html v1.7.0 更新了 - 基于layui的后台模板 970
用layui做管理后台的请进 671
有学生愿意接活干吗?做网站!价格不是很高但是经常有活干 449
select 下拉复选框 244
小魔方看到请进来,你的解决方法有bug 209
layui的编辑器是怎么配置出来的啊,难道不是layedit? 201
发现最新版layui的一个小BUG 177
layui和vue的相性貌似不是很好,求解 174
初次使用layer 发生了,这种情况,究竟是为何? 169
近期热议
layui所在服务器近期连续遭受DDoS攻击 35
弹出层不能置顶!! 12
初次使用layer 发生了,这种情况,究竟是为何? 12
急!修改回显问题~~~~ 10
layui的编辑器是怎么配置出来的啊,难道不是layedit? 10
各位大神们早上好,小弟有一个问题。 10
求救关于layer.msg的问题 9
求助。。。循环绑定传值问题 9
小魔方看到请进来,你的解决方法有bug 8
【求助】layer弹层,type1,firefox,ie8—11,当元素display为none,无 7