jquery offset positon 获取位置不准的解决方法
问题:
本地开发时,由于使用了图片,而且使用了offset().top涉及到图片所在的div距离计算的部分,本地开发一切都没问题;但是部署到服务器上时却出现布局错乱,经过排查发现总是少了一个图片高度的距离,原因是本地图片加载速度很快,在jquery的 $(document).ready 时,图片已经渲染出来,后来的计算是在图片已经出来时计算的;但是服务器网络原因,图片总是加载很慢,在进入到$(document).ready里的计算位置时,图片还没加载完成,导致获取位置信息的API计算不正确。
解决:
其实只要是获取关于图片或元素异步加载的比较慢时,使用获取宽度,高度,相对高度,相对位移都会出错,这时我们需要使用 $(window).load()即可解决元素加载不完全的问题。
大多数jQuery实例或教程都告诉我们绑定我们的jQuery代码到$(document).ready事件。虽然$(document).ready 事件在大多数情况下都OK,但是它的解析顺序是在文档准备就绪,但文档中的图片等对象正在下载的时候开始运行的。所以在某些时候使 用$(document).ready事件并不一定能达到我们预期的效果,比如一些视觉效果和动画、拖拽、预读取隐藏图片等…通过使 用$(window).load事件便可以安全的在整个文档都准备就绪之后再开始运行你期望的代码。
$(window).load(function(){
var divid = $("#cc"); //指定要获取元素的id
var p=divid.position().top; //获取元素相对于父元素y轴位置
var k=divid.width(); //获取元素宽度
});
延伸:
jquery获取元素坐标位置的两种方法:
1、获取元素在文档中的位置:
var X = $('#DivID').offset().top;
var Y = $('#DivID').offset().left;
2、获取相对(父元素)位置:
var X = $('#DivID').position().top;
var Y = $('#DivID').position().left;
jquery offset positon 获取位置不准的解决方法的更多相关文章
- jquery不能实时获取CKEDITOR值的解决方法
不用传统的获取值的方法: var ckeditor = document.getElementById("ckeditor").value; 换成: var ckeditor = ...
- jquery中checkbox全选失效的解决方法
这篇文章主要介绍了jquery中checkbox全选失效的解决方法,需要的朋友可以参考下 如果你使用jQuery 1.6 ,代码if ( $(elem).attr(“checked”) ),将 ...
- BootStrap iCheck插件全选与获取value值的解决方法
这篇文章主要介绍了BootStrap iCheck插件全选与获取value值的解决方法,解决方法其实很简单,下面小编给大家分享下这方面的知识 在使用jQuery iCheck 插件的时候遇到了一个问题 ...
- jquery的ajax()函数传值中文乱码解决方法介绍
jquery的ajax()函数传值中文乱码解决方法介绍,需要的朋友可以参考下 代码如下: $.ajax({ dataType : ‘json', type : ‘POST', url : ‘http: ...
- 在vuejs 中使用axios不能获取属性data的解决方法
Laravel5.4 vuejs和axios使用钩子mounted不能获取属性data的解决方法 //出错问题:在then 这个里边的赋值方法this.followed = response.data ...
- php session获取不到的解决方法
php session获取不到的解决方法 因为sesson数据是存在服务器端的硬盘一般临时空间不足 /tmp/ 1 这个需要清空下系统盘就可以了2 你可以在空间充足的地方mkdir 文件夹——你可以使 ...
- appium自动化测试中获取toast消息的解决方法【转】
http://blog.csdn.net/hqzxsc2006/article/details/50036911 待实践.. 解决方法:appium下切换selendroid模式去获取Android的 ...
- Jquery操作Cookie取值错误的解决方法
使用JQuery操作cookie时 发生取的值不正确,结果发现cookie有四个不同的属性,分享下错误的原因及解决方法. 使用JQuery操作cookie时 发生取的值不正确的问题: 结果发现coo ...
- javascript使用for循环批量注册的事件不能正确获取索引值的解决方法
今天遇到一个问题,那就是当使用for循环批量注册事件处理函数,然后最后通过事件处理函数获取当前元素的索引值的时候会失败,先看一段代码实例: <script type="text/jav ...
随机推荐
- BZOJ1495 [NOI2006]网络收费
题意 传送门 MY市NS中学,大概是绵阳市南山中学. 分析 参照Maxwei_wzj的题解. 因为成对的贡献比较难做,我们尝试把贡献算到每一个叶子节点上.我们发现按照题目中的收费方式,它等价于对于每棵 ...
- PAT 1009 说反话 C语言
给定一句英语,要求你编写程序,将句中所有单词的顺序颠倒输出. 输入格式:测试输入包含一个测试用例,在一行内给出总长度不超过80的字符串.字符串由若干单词和若干空格组成,其中单词是由英文字母(大小写有区 ...
- MySQL的安装配置教程
1. 官网下载ZIP压缩版本(本人电脑是64位的) x64bit MySQL Community 2. 解压到E:\SoftwareFiles\mysql-5.7.11-winx64 3. 在E:\S ...
- Linux服务器运维安全策略经验分享
http://jxtm.jzu.cn/?p=3692 大家好,我是南非蚂蚁,今天跟大家分享的主题是:线上Linux服务器运维安全策略经验.安全是IT行业一个老生常谈的话题了,从之前的“棱镜门”事件中折 ...
- Mac环境下PHPstorm配置xdebug开发调试web程序
一.安装PHP的xdebug扩展 安装xdebug(技巧,为了找到适配的版本,让xdebug网站根据phpinfo()函数输出分析找到对应的方法及安装步骤:如果安装了多个PHP版本的话,尽量用phpi ...
- redis数据结构对象
redis的数据结构对象包括 字符串 列表 哈希 集合 有序集合五种数据结构对象,由底层的8种数据结构组成这五种对象,每种对象的实现不同的数据都是不一样的. 结构 typedef struct red ...
- 杂项-数学软件:Mathematica
ylbtech-杂项-数学软件:Mathematica Mathematica是一款科学计算软件,很好地结合了数值和符号计算引擎.图形系统.编程语言.文本系统.和与其他应用程序的高级连接.很多功能在相 ...
- HTC8X V版 电信上网方法
原始V版电信上网设置,转自百度贴吧(http://tieba.baidu.com/p/3224177802). 修改SIM卡设置 修改MIP_MODE 转自贴吧:http://tieba.baidu. ...
- HDU1257题解
解题思路:这题的本质就是:求一个给定的数字序列中,非递增(或非递减)子序列的最少的条数. 思维误区:本题很容易被样例坑,以为是直接求跳跃点(i < j && ai < aj ...
- 【学习笔记】FFT
1.内容 由于noble_太懒 不想写了 非常好的博客: https://www.cnblogs.com/rvalue/p/7351400.html http://www.cnblogs.com/ca ...