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

最新推荐文章于 2022-04-21 10:27:43 发布
最新推荐文章于 2022-04-21 10:27:43 发布
阅读量1.5k 收藏
点赞数 2
文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/RightNaid/article/details/104030206
版权

官网给出的相册层方法

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

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

$(document).on('click', '.load_img', function()
最低0.47元/天 解锁文章
RightNaid
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
layer.photos(options) - 相册层
weixin_44543412的博客
05-15 1万+
layer.photos(options) - 相册层 开发工具与关键技术：Visual Studio 前端 作者：盘子 撰写时间：2019年5月 15日 layer.photos(options) - 相册层，也可以称之为图片查看器。它的出场动画从layer内置的动画类型中随机展现。再看下面是一些关于layui.photos（options）-相册层的总结。 photos支持传入json和直接读...
layui layer.photos展示图片
zengqifeng1997的博客
12-13 5197
<div class="layer-photos-demo"> <img layer-pid="pid1" layer-src="../images/a.jpg" src="../images/a.jpg" alt="a1"> <img layer-pid="pid2" layer-src="../i
Layui 内置方法 - layer.photos(相册层)
热门推荐
阿甘兄
04-22 3万+
相册层，也可以称之为图片查看器。它的出场动画从layer内置的动画类型中随机展现。photos支持传入json和直接读取页面图片两种方式。如果是json传入，如下： $.getJSON('/jquery/layer/test/photos.json', function(json){ layer.photos({ photos: json ,anim: 5 //0-6的选择，指...
Layui源码解读之img函数(图片预加载)
qq_42683219的博客
04-21 2172
一、img 函数 Layui.prototype.img = function(url, callback, error){ var img = new Image(); // 创建 img img.src = url ; // 赋值 url // complete 更多内容查看 https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLImageElement/complete
layui预览图片功能
qq_44747508的博客
12-29 3422
layer.photos有两种用法 获取json文件中的数据查看相册 这种方法直接按文档中的提示来做就好了 layer.photos文档 点击预览图片 可以直接按文档中一样操作 因为我当前是用了vue.js所以点击事件是无效的 使用vue的@click事件获取到图片地址，然后将图片地址用json形式赋值给photos这样就可以实现图片预览的功能 preview(img){ layer.photos({ photos: {"data": [{"src": img}]} ,closeBtn:
layui使用flow流加载数据.rar
03-20
"layui使用flow流加载数据.rar"这个压缩包文件显然包含了关于如何在layui中应用流加载（Flow Loading）技术的具体示例和资源。流加载是一种优化网页性能的技术，它允许页面在用户滚动时动态加载内容，而不是一次性...
layUI ajax加载html页面后重新渲染的方法
10-18
今天小编就为大家分享一篇layUI ajax加载html页面后重新渲染的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
layUI使用layer.open,在content打开数据表格,获取值并返回的方法
12-13
`这行代码就是从新窗口获取到的值，然后我们可以用`layer.alert`展示这个值，或者使用`ajax`请求对数据进行进一步处理。 ```javascript yes: function(index, layero){ var row = window["layui-layer-iframe" +...
Layui实现父子页面之间值传递.zip
03-12
`Layui` 提供了一个基于 `JavaScript` 的模块化机制，通过 `layui.use()` 方法加载需要的模块，如 `layui.table` 和 `layui.layer`。`layui.table` 用于展示数据表格，而 `layui.layer` 则用于弹出层，可以用来创建...
layui表格中使用layer.photos点击图片放大
m0_46495693的博客
12-28 1384
layui表格中使用layer.photos点击图片放大。 看到很多layer.open的帖子，但是好像只能查看单张查看，体验感很差。找到一个使用photos的那个帖子又要点击两次才能触发，于是稍微改了下。
js实现图片预加载模块化
babulongbo的博客
12-27 404
//声明变量保存图片预加载的模块 var preloadImagesMoudle = (function () { //声明一个空函数用于赋值给函数型变量 var emptyFn = function () {} //声明数组变量保存图片预加载的两种方式 var preloadType = ['unorder', 'order']; /* * 定义一个名
layer.photos 查看本地图片，并实现缩放和旋转功能
Yxh_255的博客
03-27 4317
layer.photos 查看本地图片，并实现缩放和旋转功能
使用Layui的流加载来实现图片加载
weixin_42768469的博客
07-05 2368
Layui的图片流加载记录一下第一次写博客2333最终界面展示直接上代码前端代码图片后台代码图片前端代码后台代码 记录一下第一次写博客2333 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。 emmmmm，最近有做图片的前端展示，遇到的问题也蛮多的，包括浏览器不能直接加载磁盘里的图片文件（我一直以为可以。。。），图片怎样在界面上异步加载出来，但是如果图片较多一次性加载又比较费资源，
layui实现多图片上传与多图片显示，更新展示图片
weixin_39218464的博客
03-31 3339
以模态框形式的展示写法 <a data-title="合同扫描件预览" data-tips-text="合同扫描件预览" data-modal="{:url('PurchaseContract/scanning_file')}?id={$vo['id']}" class="layui-badge layui-bg-green margin-left-5"> 合同扫描件 &...
layer.photos放大缩小以及旋转
糖果贩子的博客
07-16 5584
layer.photos放大缩小以及旋转 由于在网上搜到的旋转都多少有些问题，要么是旋转后图片转底层的背景大小不改变导致图片展示不全，要么是连背景一起旋转用起来很不方便，所以我把他调整成了旋转图片并且根据图片旋转后的长宽调整背景层的长宽。 事先准备 替换layer.js中最后一行的content content: '<input type="hidden" id="current"><div class="layui-layer-phimg"><img id="imglayer
layer.photos 相册旋转与放大缩小
kk_star的专栏
08-13 2674
1.相册旋转： 图层中新增一个旋转按钮 layer.photos({ photos: window['attach_albumlist'], anim: 5, //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数） tab:function () { num=0; $("#layui-layer-photos").parent().append('<div style="position:relativ
关于layer.photos图片点击无法弹出的问题分析。
weixin_30776273的博客
03-31 417
layer是一款口碑很好的弹层组件，详细的介绍可以参看官网介绍，网址是http://layer.layui.com/。本期在博主进行测试的过程中，发现需要顺利返回JSON并通过前端进行获取并显示照片需要注意以下内容： 1、如果测试可以将json打印出来，需要注意的是，json中的所有斜杠必须都是向右斜的，如果是本机测试的话，要注意的是获得的图片资源的路径格式必须为相对路径，也就是说路径钱...
使用layer.photo实现点击图片显示大图
qq_41330414的博客
07-13 8282
    $("body").on("click",".img-list li img",function(e){        layer.photos({ photos: {"data": [{"src": e.target.src}]} });    });
layer.photos 相册层-实现查看大图
weixin_43761212的博客
01-17 1563
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-U
img layui 流_layui流加载及传参
最新发布
05-29
好的，我可以为您解答关于 layui 流加载及传参的问题。 首先，layui 的流加载是通过 `laypage` 模块来实现的，需要先引入 `laypage.js` 文件。 在 HTML 中，可以通过以下方式来创建一个流加载的容器： ```html <div id="demo" class="layui-masonry"></div> ``` 接着，需要在 JavaScript 中进行配置和调用： ```javascript layui.use(['laypage', 'jquery'], function(){ var laypage = layui.laypage; var $ = layui.jquery; // 进行配置 laypage.render({ elem: '#demo', // 绑定元素 limit: 12, // 每页显示的数量 layout: ['prev', 'page', 'next'], // 显示的按钮 jump: function(obj, first){ // 发送请求获取数据 $.ajax({ url: '/api/getData', type: 'get', data: { page: obj.curr, limit: obj.limit }, success: function(res){ // 处理返回的数据 var html = ''; for(var i = 0; i < res.data.length; i++){ html += '<div class="layui-masonry-item"><img src="' + res.data[i].imgUrl + '"></div>'; } $('#demo').html(html); } }); } }); }); ``` 在上述代码中，`laypage.render()` 方法用于渲染流加载，其中的 `elem` 参数是指定要绑定的元素，`limit` 参数是指定每页显示的数量，`layout` 参数是指定显示的按钮。 在 `jump` 回调函数中，通过发送 AJAX 请求来获取数据，并将数据渲染到页面中。其中，`obj.curr` 和 `obj.limit` 分别表示当前页码和每页显示的数量，可以将它们作为参数传递给后端接口来获取对应的数据。 希望这个回答对您有所帮助，如有不懂之处或其他问题，欢迎继续提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值