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

未结贴
1 68
遇到两个问题求指教:
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的层里面预先放置一张图片。
求大神解释一下。

热忱回答1

  • 模块为毛不放在同一个 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 回复

最近热帖

  1. 建议。layer相册,不能实时增加图片。 4099
  2. layui 社区2016年度十佳案例 1939
  3. .Net WebCMS后台管理系统 1604
  4. layui的form组件的响应数据怎么获取 1589
  5. 蓝狐宝社区,一个成长中的社区 574
  6. 贤心是一个人吗?男的还是女的。。。 391
  7. ifram 父页面的 【确定】按钮触发页面的form验证 376
  8. Layim 各平台聊天记录同步问题. 304
  9. 这是一张吐槽贴:关于Fly社区2016案例大赛第一名 287
  10. 也许这就是前端的魅力,我得说两句再睡 210
layim下载

近期热议

  1. layui能否支持 select2.的功能 27
  2. .Net WebCMS后台管理系统 26
  3. 这是一张吐槽贴:关于Fly社区2016案例大赛第一名 18
  4. 表单开关按钮放在模态框内就不显示了,怎么办,急! 15
  5. 蓝狐宝社区,一个成长中的社区 14
  6. layer如何获取 拖动后的坐标位置 offset left和to'p 13
  7. 贤心是一个人吗?男的还是女的。。。 12
  8. layui 社区2016年度十佳案例 12
  9. 【webos】号外 号外 2016年度案例奖励到手 快进来羡慕嫉妒恨啊!!! 11
  10. 关于layui树形菜单当前元素高亮的问题 10