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

未结贴
1 406
遇到两个问题求指教:
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 回复
近期热议
新版本只是短暂搁置,并非放弃 46
用layer弹出层没有效果为什么? 20
关于图片上传时 一直提示 “请对上传接口返回JSON字符” 14
等待Layui2.0的发布 13
layPage渲染失败 13
寻求高手做 PHP网站定制,PHP二次开发 前端,后端,功能 13
某些人,请自觉。。。 12
怎么修改 导航栏,选项卡等等的 颜色? 11
lay tab 怎么设置第一个不带关闭 其他的带关闭按钮 9
select选项选择后不能选取默认的请选择选项 9