开发JqueryMobile的时候需要用到PhotoSwipe插件来显示图片。
下载地址:
http://www.photoswipe.com/
如何让程序能动态加载图片呢,参照demo改写了一下,在初始化的时候先加载图片,然后再实现效果:
<script type="text/javascript"> var options = {}; var instance; (function(window, $, PhotoSwipe) { $(document).ready(function() { loadDatas(); }); /*初始化插件*/ function bindPhotoSwipe() { instance = $("#Gallery a").photoSwipe(options); var size = $("#Gallery a").length; // onDisplayImage instance.addEventHandler(PhotoSwipe.EventTypes.onDisplayImage, function(e) { console.log("Number of images loaded so far: "+ instance.cache.images.length); }); } /* 加载数据 */ function loadDatas(){ var url = "./action/GetPicAction.do"; var content = ''; $.get(url,function(response){ $.each(response,function(index,item){ content += "<li><a href=\""+item.fullurl+"\" rel=\"external\"><img src=\""+item.thumburl+"\" /></a></li>"; }); $("#Gallery").append(content); },"json"); bindPhotoSwipe(); }; /* 解绑 */ function detatch(){ PhotoSwipe.detatch(instance); PhotoSwipe.activeInstances = []; } }(window, window.jQuery, window.Code.PhotoSwipe)); </script>
程序看起来是没什么问题,图片也能出来,但是就是没有图片预览效果。
用firebug调试出现下面的错误:
uncaught exception: Code.PhotoSwipe.createInstance: No images to passed.
在构造插件结构的时候没加载进图片。
这个问题折腾了好久,最终想到是不是同步异步的问题,于是在发送ajax请求的时候加了一句,关掉异步请求。
$.ajaxSettings.async = false;
抱着试一试的态度,谁知结果还真实现了。
附上后台生成的json字符串:
[{"fullurl":"images/full/1.jpg","thumburl":"images/thumb/1.jpg"},{"fullurl":"images/full/2.jpg","thumburl":"images/thumb/2.jpg"},{"fullurl":"images/full/3.jpg","thumburl":"images/thumb/3.jpg"},{"fullurl":"images/full/4.jpg","thumburl":"images/thumb/4.jpg"},{"fullurl":"images/full/5.jpg","thumburl":"images/thumb/5.jpg"},{"fullurl":"images/full/6.jpg","thumburl":"images/thumb/6.jpg"},{"fullurl":"images/full/7.jpg","thumburl":"images/thumb/7.jpg"},{"fullurl":"images/full/8.jpg","thumburl":"images/thumb/8.jpg"},{"fullurl":"images/full/9.jpg","thumburl":"images/thumb/9.jpg"}]
附上页面代码:
<div data-role="page" id="pic_index" class="gallery-page"> <div data-role="header"> <h1>美女图片</h1> </div> <div data-role="content"> <ul class="gallery" id="Gallery"> </ul> </div> <div data-role="footer"> <h4>@飘渺</h4> </div> </div>
相关推荐
制作ajax加载等待图片,有了该工具,即可随意制作出自己想要的ajax加载图片
各种AJAX加载图片 loading 效果
Echarts通过Ajax实现动态数据加载,Echarts通过Ajax实现动态数据加载。
以AJAX方式加载图片=异步加载图片,先显示个图片的占位图片 此技术常见于漫画网站.zip
主要介绍了JQuery实现Ajax加载图片的方法,涉及jQuery基于缓存获取图片的技巧,需要的朋友可以参考下
php+ajax实现图片动态分批加载,支持分页
鼠标悬停时Ajax加载图片,不管是鼠标放在文字上或是链接上或是图片上时,会自动加载对应的图片,类似Ajax适时小图显示大图的功能。你可以将它修改为移上链接加载外部页面,可以网址,但必须指定一个页面名称,比如:...
AJAX加载图标大全 ajax加载图片 加载图标
ajax,servlet动态加载dtree
php+ajax加载数据转圈动画图片.zip
在实际应用中我们经常会用到树,无论是用javascript实现还是用TreeView等控件,都能很好的...为了解决这个问题,我曾经在项目里利用Ajax来动态加载节点,即开始只显示必要的节点,当用户展开树的时候再加载对应的节点......
使用Ajax动态加载JSON文件的实例源码
NULL 博文链接:https://rody.iteye.com/blog/545189
Jquery插件小集合(ajax 投票 AJAX动态加载广告)
这是一个非常酷的弹出对话框程序,用于网页设计中,在弹出对话框时,他会让原来的页面以半透明状显示,然后,在同一页面中弹出一个新的对话框,在其中使用AJAX动态加载网页,或者图片等等。包含完整的使用例子和说明...
基于jquery.masonry插件开发的瀑布流ajax动态加载数据功能(使用的是aspx的页面)
一个jsp 和一个servlet 教你看懂ajax的动态加载过程
Ajax加载外部页面的一个弹出层效果 ajax实现弹出层 简单实用
我们经常看到在网站底部有“查看更多”的按钮,点击就可以无刷新加载,只要修改数据库信息和前台页面信息,功能就可以实现
用 jquery 制作随着显示页面的滚动条的滚动动态加载图片,适用于图片太多的页面,在访问网页时,可以先只加载第一屏要显示的图片,当用户进行向下滚动查看页面的时候,动态去加载这些图片,好处是减少页面第一次显示...