JQ获取动态加载的图片大小的正确方法分享
更新时间：2013年11月08日 17:00:44 作者：
这篇文章介绍了JQ获取动态加载的图片大小的正确方法，有需要的朋友可以参考一下
有一些很容易出错的获取动态加载的图片的尺寸的方法, 之所以出错, 主要原因是:
你在代码在图片从网页上下载完毕之前就调用了, 这种情况在本机开发时不太容易发现.
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);
相关文章
这篇文章主要介绍了JQuery鼠标移到小图显示大图效果的方法,涉及jQuery鼠标事件与图形操作技巧,需要的朋友可以参考下2015-06-06
jQuery自定义图片缩放拖拽插件imageQ实现方法(附demo源码下载)
这篇文章主要介绍了jQuery自定义图片缩放拖拽插件imageQ实现方法,涉及jQuery扩展操作及页面元素操作技巧,并附带了完整的demo源码供读者下载参考,需要的朋友可以参考下2016-05-05
jQuery替换节点用法示例(使用replaceWith方法)
这篇文章主要介绍了jQuery替换节点的方法,结合简单实例形式分析了jQuery使用replaceWith方法替换P标签显示内容的相关实现技巧,需要的朋友可以参考下2016-09-09
放弃用你的InnerHTML来输出HTML吧 jQuery Tmpl不详细讲解
在Ajax横道的今天，我们在页面交互上有了更高的要求，动态生成HTML毫无疑问是其中的一种。动态生成HTML的方式多种多样，最终通过一定的方法输出给用户innerHTML、documentWrite等方式2013-04-04
这篇文章主要为大家详细介绍了使用jQuery实现购物车，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-10-10
基于jquery实现点击链接弹出层效果，其基本实现原理是这样的：jquery操作DOM元素。对层样式的设置。将display:设置为none;让层隐藏；对jq点击弹出层相关知识感兴趣的朋友一起学习吧2016-01-01
图片上传，网上有好多版本，今天小编给大家分享jquery.uploadView 实现图片预览上传功能，感兴趣的的朋友一起看看吧2017-08-08
这篇文章主要介绍了jquery实现的3D旋转木马特效，功能实现非常简单，推荐给大家，有需要的小伙伴可以参考下。2015-08-08
这篇文章主要介绍了从如何写JQuery插件，需要注意的事项，还有必须要做的步骤，看过这个文章相信你会明白如何写好一个JQuery插件2013-11-11
这篇文章主要介绍了jquery常用操作小结,需要的朋友可以参考下2014-07-07
最新评论