jquery获得图片的真实大小
$(function(){
var imgSrc = $("#image").attr("src");
getImageWidth(imgSrc,function(w,h){
console.log({width:w,height:h});
});
});
function getImageWidth(url,callback){
var img = new Image();
img.src = url;
// 如果图片被缓存,则直接返回缓存数据
if(img.complete){
callback(img.width, img.height);
}else{
// 完全加载完毕的事件
img.onload = function(){
callback(img.width, img.height);
}
}
}
作者:于坤
链接:http://www.zhihu.com/question/28733200/answer/42400792
来源:知乎
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
jquery获得图片的真实大小的更多相关文章
- js获取图片的真实大小,字节大小
在我们上传文件的时候,很多时候都要对他做限制,那么怎么在文件上传的时候,就获得这个文件的大小呢?至少在js前台有一个判断的时候,就不会给后台造成更大的压力了,下面就用js来获得文件的大小 <ht ...
- js和jquery获取图片真实的宽度和高度
1.什么时候需要获取图片真实的宽度和高度 在做pc网页的时候,有时候会考虑按照插入的图片的尺寸来判断图片是横图还是竖图.然后判断过后给予不同的展示方式! 另外一种就是在手机页面上,在新闻页插入的图片往 ...
- 如何通过js和jquery获取图片真实的宽度和高度
什么时候需要获取图片真实的宽度和高度 在做pc网页的时候,有时候会考虑按照插入的图片的尺寸来判断图片是横图还是竖图.然后判断过后给予不同的展示方式! 另外一种就是在手机页面上,在新闻页插入的图片往往都 ...
- Image Wall - jQuery & CSS3 图片墙效果
今天我们要为您展示如何基于 jQuery 和 CSS3 创建一个整洁的图片墙效果.我们的想法是在页面上洒上一些大小不同的缩略图,并在当我们点击图片时候显示丝带,会显示一些描述,再次点击缩略图时,丝带将 ...
- 18款 非常实用 jquery幻灯片图片切换
1.jquery图片滚动仿QQ商城带左右按钮控制焦点图片切换滚动 jquery图片特效制作仿腾讯QQ商城首页banner焦点图片轮播切换效果,带索引按钮控制和左右按钮控制图片切换. 查看演示>& ...
- 自定义控件,上图下字的Button,图片任意指定大小
最近处在安卓培训期,把自己的所学写成博客和大家分享一下,今天学的是这个自定义控件,上图下字的Button安卓自带,但是苦于无法设置图片大小(可以在代码修改),今天自己做了一个,首先看一下效果图,比较实 ...
- jquery裁剪图片插件cropit示例
重装农药第16天!! jquery裁剪图片插件cropit示例 背景:做的手机网页项目,用html file控件上传图片,有些手机拍照后图片会很大,20M以上的,用之前的H5 formdata上传的话 ...
- 【jquery】图片前后对比效果——beforeAfter
今天分享一款 jquery 插件——图片前后对比(beforeAfter),效果如下: 使用方法: <!DOCTYPE HTML> <html lang="en" ...
- 利用jQuery实现图片无限循环轮播(不借助于轮播插件)
原来我主要是用Bootstrap框架或者swiper插件实现轮播图的功能,而这次是用jQuery来实现图片无限循环轮播! 用到的技术有:html.css.JavaScript(少).jQuery(主要 ...
随机推荐
- android开发文档工具集(持续更新中...)
http://www.androiddevtools.cn/ android 产品->交互->视觉->开发->测试各种工具地址下载, 各种文档下载应有尽有,强烈推荐. ht ...
- callee
首先解释callee 参考网站 http://www.css88.com/archives/1706 callee是arguments的一个成员,仅当函数正在执行的时候才可用,so用于递归也行 代码示 ...
- Nginx reopen reload作用及工作过程
http://www.iigrowing.cn/nginx-reopen-reload-zuo-yong-ji-gong-zuo-guo-cheng.html Nginx reopen reload作 ...
- apche的主配置文件)
apche的主配置文件conf/httpd.conf(根据个人主机的路径设置,以下仅供参考) 需配置的行号与方法(示列): 172 #ServerName localhost:80 173 Serv ...
- H5页面左图右边文字如何布局
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&qu ...
- ios 程序学习
马上着手开发iOS应用程序:五.提交应用与寻找信息 2013-01-11 15:36 佚名 apple.com 我要评论(0) 字号:T | T 本文介绍了您已经学习完如何开发一个优秀的iOS应用之后 ...
- JavaWeb chapter 2 Servlet
1. 什么是Servlet: Servlet是运行于Web容器中,按照其自身规范编写的Java应用程序. Servlet是用Java语言编写的,它是一个Java类,因而Servlet遵守所有Java ...
- tomcat 一个项目在本机和办公室以外电脑服务器上搭建出现乱码问题
插入数据库都是???乱码 页面浏览之前在本机插入的数据都是正常的 修改conf目录下的server.xml文件 转义字符集 为 GBK 或 UTF-8 utf-8 即 添加 URIEncoding= ...
- 4、android BroadcastReceiver详细用法
BroadcastReceiver也就是“广播接收者”的意思,顾名思义,它就是用来接收来自系统和应用中的广播. 在Android系统中,广播体现在方方面面,例如当开机完成后系统会产生一条广播,接收到这 ...
- java.io.IOException: Too many open files
1.描述: 每日一样,例行打开hadoop集群的cloudera manager的管理界面.发现出现了多个bad health的服务.那么出现的这个问题就是查看该服务运行的日志,对应的该服务当中,会包 ...