基于JQuery的一个图片预览功能
前段时间因为项目上需要而写的一个JQuery的插件,用于将页面中的小图片放大为原始图片从而进行预览效果的。 这个插件就像其它所有的JQuery插件一样,本身没有多么特别吸引的地方,但如果结合我后面要写的一篇关于浏览器插件开发的文章,那我们的前端页面的展现将会妙趣横生啊! 言归正传,还是说说我这个插件是做什么的吧~~ 有很多时候(我相信大家基本上都遇到过),我们看到一张小图时,需要不打开新的页面就能预览它!这时候,方式有很多:弹出新窗口、将图片用js在当前页面中放大等等。每种方式都需要根据实际的情况或需求来确定使用,没有说谁好谁不好的!我这里要介绍的就是我们需求人员要求比较“华丽”的方式,就是蒙层且操作简洁! 具体的请大家自己看文档和示例吧
这种需求的提出,我第一个印象是:thickbox和相应的一些插件。于是我也去用了一下,结果我发现其实,我只用到了这些插件的一点点功能,当然这不是最让我受不了的!最让我受不了的是:这些插件每次预览时都要重新去请求一下该图片,这对于一个web项目来说,是对性能的一个损耗,因此,这是我放弃使用它们的原因,也是我重新实现现在这个插件的动力!
在实现这个插件的时候,我充分借鉴了fancybox的展现方式和操作方式!但我实现了使用“假缓存”(所谓假缓存就是:当前显示的小图片其实就是原图,只是指定长宽来限制它的显示尺寸,预览时直接将该图片原始显示即可)来减少或不对图片的重新请求,进而减少了对web服务的一点压力(因此这样的使用情形,如果一些网站用户使用预览的功能较少,那就不太适合使用了,因为加载原图会比较慢一点)!
使用这个插件的特点是:预览的图可以是当前的图,也可以是指定的图片,还可以是一段文本等任何可以显示的内容!