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

未结贴
1 107
遇到两个问题求指教:
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 1.0.8 发布,一次用心的小版本升级 4871
LayIM 发布 3.0.3,增加音频消息支持及移动端联系人界面 1292
thinkphp5.0+layui个人博客源码分享,也可以做cms 1116
基于LayUI的后台管理模板BeginnerAdmin更新啦~~~~~~~~~~~~~~ 437
Layer真心好用,有了它,我作为一个phper终于有信心抛开二次开发 275
layui不好用啊,好复杂啊 252
layui 三级联动 244
有偿求助作者大大,我有一个opencart商城网站,想集成layui的问答系统 231
不得不承认,非常棒的一个富文本编辑器 189
ThinkPHP基于Layui无刷提交数据表单,亲测可用 177
layim下载
近期热议
layui 1.0.8 发布,一次用心的小版本升级 54
LayIM 发布 3.0.3,增加音频消息支持及移动端联系人界面 21
layui不好用啊,好复杂啊 13
通过ajax动态生成的新checkbox添加到table里面样式不存在了,怎么才能重新渲染? 13
基于LayUI的后台管理模板BeginnerAdmin更新啦~~~~~~~~~~~~~~ 12
layui的进度条总是无法显示 10
layer.confirm弹出之后的keydown事件 10
关于富文本框的内容清空问题 10
thinkphp5.0+layui个人博客源码分享,也可以做cms 9
请问layui的tab切换,防止页面刷新效果重置是怎么实现的? 8