JQ获取动态加载的图片大小的正确方法分享
来源:互联网 发布:app和服务器数据同步 编辑:程序博客网 时间:2024/05/17 04:28
这篇文章介绍了JQ获取动态加载的图片大小的正确方法,有需要的朋友可以参考一下
有一些很容易出错的获取动态加载的图片的尺寸的方法, 之所以出错, 主要原因是:
你在代码在图片从网页上下载完毕之前就调用了, 这种情况在本机开发时不太容易发现.
jQuery load()事件处理的BUG, 当图片是从浏览器缓存取得时, 获取的是错误的尺寸.
错误的代码是:
(错误)在添加了HTML之后立即调用代码获取尺寸
复制代码代码如下:
var html = '';
$('#my_div').html(html);
var width = $('#my_div img').width(); // may return 0
$('#my_div').html(html);
var width = $('#my_div img').width(); // may return 0
(错误)用jQuery的load()事件处理
复制代码代码如下:
var html = '';
var img = $(html);
html.load(function(){
// return 0 if image is loaded from browser cache
var width = img.width();
}); //脚本学堂 http://www.jbxue.com
$('#my_div').html(img);
var img = $(html);
html.load(function(){
// return 0 if image is loaded from browser cache
var width = img.width();
}); //脚本学堂 http://www.jbxue.com
$('#my_div').html(img);
下面这种才是真正正确的方法, 使用JavaScript的Image类:
正确的方法
复制代码代码如下:
var html = '';
$('#my_div').html(html);
var ni = new Image();
ni.onload = function(){
var width = ni.width;
}
ni.src = img.attr(URL);
$('#my_div').html(html);
var ni = new Image();
ni.onload = function(){
var width = ni.width;
}
ni.src = img.attr(URL);
- JQ获取动态加载的图片大小的正确方法分享
- 获取动态加载的图片大小的正确方法
- 获取远程图片大小的方法
- js获取动态加载图片大小
- 正确用JQ的AJAX加载XML并解析
- img预加载获取图片大小方法
- img预加载获取图片大小方法
- 常用的JQ获取屏幕宽度方法
- jq获取input值的各种方法
- 分享一下Edit Text动态获取字数的方法
- 动态限定图片大小的js
- 三种获取js加载的动态内容的方法
- JAVA中图片大小的获取
- 分享一个制作JQ插件方法的文章
- jq获取动态生成元素(标签)的参数值
- 【翻译】用正确的方法改变图片大小(Resize a UIImage the right way)
- 基于jq 滚动条到底加载更多的方法
- css控制图片大小的方法
- UVA 11137 Ingenuous Cubrency 类似硬币问题的简单dp
- asp.net 截取字符串代码
- 工作和个人学习总结
- 比首席执行薪酬还高的高级工程师
- 基本类型转换(无符号数转换成浮点需关注)
- JQ获取动态加载的图片大小的正确方法分享
- FFmpeg解码流程
- 【Chapter 2】基于Chp1的实例详解
- 一个小小的自启动程序,编译环境VS2010
- MFC中单文档程序框架
- NLP(二)--编辑距离
- #pragma comment(lib, "Ws2_32.lib")
- Android 开发中的线程编程技术
- 在Keil4中建立基于固件库的STM32工程