layUI 流加载渲染的图片，如何用layer.photos预览

RightNaid

于 2020-01-18 14:57:13 发布

阅读量1.6k

点赞数 2

CC 4.0 BY-SA版权

文章标签： jquery

本文链接：https://blog.youkuaiyun.com/RightNaid/article/details/104030206

本文主要介绍了在layUI中处理流加载数据中的图片，如何使用layer.photos进行预览。当图片通过ajax获取并显示在页面上时，首次点击图片无法正常弹出相册层，需要第二次点击才能生效。作者通过在图片的onclick事件中直接调用相册层解决了这个问题，避免了点击延迟。这是一个常见的前端开发问题，记录下来以便日后参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

官网给出的相册层方法

layer.photos({
  photos: '#layer-photos-demo'
  ,anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
});

页面的流加载数据全是用ajax获取的，原来想着给图片加点击事件，通过事件触发相册层，但是点击事件第一次没反应，必须点击第二次才能弹出相册层，代码如下

$(document).on('click', '.load_img', function() {
	var id = $(this).parents("ul").attr("id");
	layer.photos({
		photos: "#" + id,
		anim: 5
	});
})

百思不得其解，最后想到一个解决办法，给图片加onclick事件，直接在方法里写相册弹出就可以啦

layer_photo = function (that){
	var id = $(that).parents("ul").attr("id")
	layer.photos({
		photos: "#"+id
		,anim: 5
	}); 
}

虽然只是小问题，但想了大半天才解决，记录下来，下次再遇到这样的问题，就迎刃而解啦