3月题外:关于JS实现图片缩略图效果的一个小问题
由于3月可能要结束实习,所以应该不会有特别固定的主题,另外我会在月初陆续补上上个月的番外篇Projection和TMS,作为介绍性的内容对矢量切片部分进行补充,剩下时间不定期写一些杂烩。
最近两天在做一个地图上popup浮动层的功能,因为之前一直沿用OpenLayers2中自带的popup组件,但OL2中实在是难以控制浮动层的样式,远不及直接在地图上覆盖div布局来的快,所以我决定暂时放弃使用popup,自己编写一个浮动层。
一 问题的来源
设计草图如下(样式主要参照了百度地图的弹出层),主要讲这个弹出层分为了三级:1)location:地理位置信息和定位;2)images:图片集;3)indexs:指数计算;
那么,这篇题外讲的就是在实现功能的过程中遇到的一个小问题——图片的缩略图,在这里先简单介绍一下背景和思路:利用OL2中的popup的被选中触发的事件,填充已经隐藏在页面中的POI弹出层,而数据库中存储的是图片的URL,图片存储在服务器上,在填充POI弹出层的图片部分时,直接插入<img>元素,再利用JS部分的功能代码对图片进行重定义大小,最终实现将缩略图显示在我们的页面上。
PS:其实这算不上是真正意义上的缩略图,因为页面在加载的时候,还是会加载完整的图片,只是显示的时候是以缩略的形式,并不会对页面的加载速度有提升,在此只是为了实现这样一个效果。
好了,那么问题在哪呢?我们先来看如何实现。
二 实现过程
2-1)利用HTML和CSS,构建一个demo,并按照设计实现布局
效果如上,接下来是将图片插入到image栏中,我这里使用的图片都是未经过处理的,所以宽和高比例几乎都不相同,所以需要经过处理才能妥善的放到image栏中。
2-2)处理图片的尺寸(Resize)
下面这段代码是网络上很常见的代码,当你搜索"JS"、"缩略图"等关键字的时候,十有八九会出现这样一段代码:
//重新定义img的宽和高
//参数:orginalImage<目标图片的DOM元素>、newWidth<图片元素的容器宽度>、newHeight<图片元素的容器高度>
function reSizeImage(orginalImage, newWidth, newHeight){
var image = new Image();
image.src = orginalImage.src
if(image.width > 0 && image.height > 0){
//判断图片的纵横比
if(image.width/image.height >= newWidth/newHeight){
//当源图的宽度大于重定义尺寸的宽度时,应压缩高度
if(image.width > newWidth){
orginalImage.width = newWidth;
orginalImage.height = (image.height*newWidth)/image.width;
}else{
//当宽度小于或等于重定义宽度时,图片完全显示
orginalImage.width =image.width ;
orginalImage.height = image.height;
}
}else{
//同理
if(image.height > newHeight){
orginalImage.height = newHeight;
orginalImage.width = (image.width*newHeight)/image.height;
}else{
orginalImage.width = image.width;
orginalImage.height = image.height;
} }
}
}
当然,可能细节上会有出入,但是大体思路是一致的,既然有人造好了轮子,那还能有什么问题呢?
在实现过程中,将这个功能函数应用到某个场景中(以我刚才上文提到的弹出层为例):
function createPOIDetail(monitSiteName,monitLon,monitlat,locationStr,imageURL,Species,Yvalue){
//填充我的弹出层HTML模板
$("#poi_monitsitename").text(monitSiteName);
$("#poi_monitsitelonandlat").text(monitLon +"° E,"+ monitlat+"° N");
$("#poi_location").html("<img src='images/markList_smallsize_opacity0.png' style='width:15px;height:12px;'>"+
"<a class='a_text' href='' style='font-size:11px; color:#FFFFF'>"+locationStr+"</a>");
$("#poi_images").html(imageURL);
$("#poi_dominacespecie").text(Species);
$("#poi_dominaceYValue").text(Yvalue); $("#poi_detail_panel").fadeIn(800);
//对弹出层模板中已经插入的图片进行resize
var orginalIMG = document.getElementById("imageFrame");
var newWidth = $("#poi_images").width();
var newHeight = $("#poi_images").height() reSizeImage(orginalIMG,newWidth,newHeight); }
每次触发这个函数的时候,我们预期的效果是,在Image栏里出现一个大小适应的缩略图,但奇怪的是,当第一次进入页面,触发该函数时,reSizeImage方法都没有执行,直接插入了真实大小的图片,导致整个弹出层变形(如下图所示)。
弹出层变形 弹出层正常
但往往在第二次,第三次触发该函数的时候,弹出层又正常了,真的很奇怪!
三 问题定位
从逻辑上看,代码应该没有明显的错误,利用Firebug中的断点跟踪之后发现,第一次触发函数,并没有进入reSizeImage的if(image.width > 0 && image.height > 0)这个分支里,我们可以使用console.log去查看当时插入的<img>元素的宽和高,你会发现,第一次触发的时候插入的<img>元素的宽高都是0,但是<img>元素也都插入成功了,并且能看到src等属性都是有值的。那为什么一个有src的<img>元素会不存在宽高呢?
其实问题很简单,在网页的加载过程中,图片的加载是最后才进行的,所以,虽然此时<img>不空,且已经有了src的属性值,但是图片本身还没有加载进来,所以导致了你的代码无法顺利的进入resize的过程。
四 解决
知道了问题在哪,那解决方案也很简单,只要我们将reSizeImage函数放到目标图片加载完成之后再执行就可以了,也就是说:
var orginalIMG = document.getElementById("imageFrame");
var newWidth = $("#poi_images").width();
var newHeight = $("#poi_images").height()
orginalIMG.onload = function(){
reSizeImage(orginalIMG,newWidth,newHeight);
}
这样一来,你就能保证每次页面加载完成后,触发相应的函数就能够得到一个经过resize后的图片了!
参考博客:《img.width一直是0》:http://www.cnblogs.com/zqzjs/p/4512988.html
3月题外:关于JS实现图片缩略图效果的一个小问题的更多相关文章
- 3月题外:关于JS实现图片缩略图效果的一些小问题
由于3月可能要结束实习,所以应该不会有特别固定的主题,另外我会在月初陆续补上上个月的番外篇Projection和TMS,作为介绍性的内容对矢量切片部分进行补充,剩下时间不定期写一些杂烩. 最近两天在做 ...
- JS实现图片''推拉门''效果
JS实现图片''推拉门''效果 ''推拉门''动效也可以称作"手风琴"效果,大多数效果实现的思路基本是一样的,下面介绍两种方法,一种是通过改变图片的偏移位置实现移动,另一种是通 ...
- js实现图片局部放大效果
图片局部放大效果结合的知识点主要是DOM的操作,以及事件的应用,所以首先要对DOM的操作有一定了解,其次能对事件的应用有一定的累积. 如上图,可以看到,这是放大镜的基本效果,主要分成左右两个部分.左边 ...
- 3月题外:关于GeoServer和OpenLayers3实用开源插件或组件的总结
Geoserver篇 注意: 1)用法 GeoServer-Extension的使用方法:将jar包直接放入部署在tomcat上的geoserver/WEB-INF/lib文件夹中 2)在安装插件时, ...
- JS中图片飞飞效果
当鼠标在界面上移动的时候,后面有一连串的图片跟随者一起飘动,效果如下: 实现的基本思想:准备五个img标签,为了方便控制都放在一个div里面,设置div的定位方式为 fixed,设置成这中定位方式主要 ...
- js实现图片幻灯片效果
其效果是点击图片切换到下一张图片 首先准备五张图片 <ul class="imge"> <li><img src="images/1.jpg ...
- wxPython缩放图片控件的一个小例子
前几天写程序的时候,想有个自适应的图片控件,但是一直没有找到合适的解决方案.今天终于解决了这个问题,发在这里,以供参考. 程序截图: 文件下载地址: http://files.cnblogs.com/ ...
- ImageTag,图片左上侧有一个小标签
这实现思路其实很简单 需求:1. 图片比原来的<div>大,需要切割图片.2. 图片左上角显示标签 解决思路: 1. 把照片设置成div的backgroundImage,然后用CSS3切割 ...
- 使用纯生js实现图片轮换
效果图预览. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...
随机推荐
- Button Bashing(搜索)
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAx8AAAI2CAIAAAC+EqK4AAAgAElEQVR4nOydf0BT9f7/37fS423mWn
- [tensorflow]的安装
1 pip install 最简单直接的方法,通过pip install安装,命令如下: pip install tensorflow-gpu //安装gpu版tensorflow pip insta ...
- CSU 1351 Tree Counting
原题链接:http://acm.csu.edu.cn/OnlineJudge/problem.php?id=1351 DP题,毫无疑问.由于动态规划题目做得少.不熟悉,刚开始自己用f[i]表示用 i ...
- 【LOJ】#2350. 「JOI 2017/2018 决赛」月票购买
题解 首先求一个最短路图出来,最短路图就是这条边在最短路上就保留,否则就不保留,注意最短路图是一个有向图,一条边被保留的条件是 dis(S,u) + val(u,v) = dis(v,T)我们需要求两 ...
- Python基本语法[二]
Python基本语法 1.定义变量: 代码正文: x= y= z=x+y 代码讲解: 2.判断语句: 代码正文: score= : print("你真棒") print(&qu ...
- RSA私钥和公钥文件格式 (pkcs#1, pkcs#8, pkcs#12, pem)
RSA私钥和公钥文件格式 (pkcs#1, pkcs#8, pkcs#12, pem) 2018年03月07日 11:57:22 阅读数:674 Format Name Description PKC ...
- CF815C Karen and Supermarket [树形DP]
题目传送门 Karen and Supermarket On the way home, Karen decided to stop by the supermarket to buy some gr ...
- Python类总结-多态及鸭子类型
Python天生支持多态. 什么是多态: 一类事务的多种形态. 多态的一个例子 class Alipay(): def pay(self,money): print('用支付宝支付了%s元' % mo ...
- Django+Nginx+uwsgi搭建自己的博客(三)
(本来打算在这篇博文中介绍Users App的前端部分的,但写着写着就发现还需要铺垫很多东西才能把整个项目串的比较流畅些,因此这篇就继续介绍了后端的一些东西,前端的部分只好跳票到下一篇了-) 在上一篇 ...
- css控制默认滚动条样式
针对webkit内核的浏览器,使用伪类来改变滚动条的默认样式,详情如下: 滚动条组成部分 1. ::-webkit-scrollbar 滚动条整体部分 2. ::-webkit-scrollbar-t ...