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

未结贴
1 185
遇到两个问题求指教:
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 回复
最近热帖
为什么设计项目最初要为数据设计身份指纹(唯一标号)? 683
利用FormData和Ajax批量上传文件 565
XUI 0.1版本发布 为企业移动信息化而生 405
后台模板免费版出来了吗?都月底了 @贤心 389
关于layui版本升级的几点建议 303
完整的省市区三级联动菜单 284
关于Layui分页问题-带参数的异步请求 226
月底了,2.0有消息吗? 222
出大事了,求助 ,各位大大,拜托了,我搞几天了都 196
upload上传成功,提示 跨域的问题,且不执行回掉函数 145
近期热议
出大事了,求助 ,各位大大,拜托了,我搞几天了都 27
在线等,如何 让 一开始from 查询不查询 等点了按钮才查询 16
upload上传成功,提示 跨域的问题,且不执行回掉函数 11
利用FormData和Ajax批量上传文件 10
layui.form在火狐下的bug 10
为什么input的样式没有显示?、 10
Layui的select不显示,会是什么原因呢? 8
button的点击用哪个监听 7
layui iframe如何用js跳转到指定页 7
关于layer父子页面传值问题 7