JQ获取动态加载的图片大小的正确方法分享
2013-11-08 00:00
603 查看
有一些很容易出错的获取动态加载的图片的尺寸的方法, 之所以出错, 主要原因是:
你在代码在图片从网页上下载完毕之前就调用了, 这种情况在本机开发时不太容易发现.
jQuery load()事件处理的BUG, 当图片是从浏览器缓存取得时, 获取的是错误的尺寸.
错误的代码是:
(错误)在添加了HTML之后立即调用代码获取尺寸
(错误)用jQuery的load()事件处理
下面这种才是真正正确的方法, 使用JavaScript的Image类:
正确的方法
你在代码在图片从网页上下载完毕之前就调用了, 这种情况在本机开发时不太容易发现.
jQuery load()事件处理的BUG, 当图片是从浏览器缓存取得时, 获取的是错误的尺寸.
错误的代码是:
(错误)在添加了HTML之后立即调用代码获取尺寸
var html = ''; $('#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(); }); $('#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);
相关文章推荐
- JQ获取动态加载的图片大小的正确方法分享
- 获取动态加载的图片大小的正确方法
- Android将Glide动态加载不同大小的图片切圆角与圆形的方法
- js动态加载显示图片,获取大小
- 解决:ScrollView嵌套ListView导致无法正确计算ListView的高度之动态加载图片高度常规方法失效。
- 获取android 手机屏幕的大小以及动态设置背景图片的两种方法;
- img预加载获取图片大小方法
- php查看请求头信息获取远程图片大小的方法分享
- js获取动态加载图片大小
- php查看请求头信息获取远程图片大小的方法分享
- JS中通过url动态获取图片大小的方法小结(两种方法)
- 基于vue 动态加载图片src的解决方法
- Android实现Listview异步加载网络图片并动态更新的方法
- GridView图片加载重复的正确解决方法
- flex 加载图片的同时获取加载图片的大小
- iPhone开发加载图片获取方法
- Java中获取文件大小的正确方法
- RDLC加载动态图片和文本的方法
- MFC获取rgb图像数据后动态显示及保存图片的方法