问题:

本地开发时,由于使用了图片,而且使用了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 获取位置不准的解决方法的更多相关文章

  1. jquery不能实时获取CKEDITOR值的解决方法

    不用传统的获取值的方法: var ckeditor = document.getElementById("ckeditor").value; 换成: var ckeditor =  ...

  2. jquery中checkbox全选失效的解决方法

    这篇文章主要介绍了jquery中checkbox全选失效的解决方法,需要的朋友可以参考下     如果你使用jQuery 1.6 ,代码if ( $(elem).attr(“checked”) ),将 ...

  3. BootStrap iCheck插件全选与获取value值的解决方法

    这篇文章主要介绍了BootStrap iCheck插件全选与获取value值的解决方法,解决方法其实很简单,下面小编给大家分享下这方面的知识 在使用jQuery iCheck 插件的时候遇到了一个问题 ...

  4. jquery的ajax()函数传值中文乱码解决方法介绍

    jquery的ajax()函数传值中文乱码解决方法介绍,需要的朋友可以参考下 代码如下: $.ajax({ dataType : ‘json', type : ‘POST', url : ‘http: ...

  5. 在vuejs 中使用axios不能获取属性data的解决方法

    Laravel5.4 vuejs和axios使用钩子mounted不能获取属性data的解决方法 //出错问题:在then 这个里边的赋值方法this.followed = response.data ...

  6. php session获取不到的解决方法

    php session获取不到的解决方法 因为sesson数据是存在服务器端的硬盘一般临时空间不足 /tmp/ 1 这个需要清空下系统盘就可以了2 你可以在空间充足的地方mkdir 文件夹——你可以使 ...

  7. appium自动化测试中获取toast消息的解决方法【转】

    http://blog.csdn.net/hqzxsc2006/article/details/50036911 待实践.. 解决方法:appium下切换selendroid模式去获取Android的 ...

  8. Jquery操作Cookie取值错误的解决方法

    使用JQuery操作cookie时 发生取的值不正确,结果发现cookie有四个不同的属性,分享下错误的原因及解决方法. 使用JQuery操作cookie时 发生取的值不正确的问题:  结果发现coo ...

  9. javascript使用for循环批量注册的事件不能正确获取索引值的解决方法

    今天遇到一个问题,那就是当使用for循环批量注册事件处理函数,然后最后通过事件处理函数获取当前元素的索引值的时候会失败,先看一段代码实例: <script type="text/jav ...

随机推荐

  1. CentOS 6.8 源码安装mysql 5.6

    一:卸载旧版本 rpm -qa | grep mysql rpm -e mysql #普通删除模式 rpm -e --nodeps xxx(xxx为刚才的显示的列表) # 强力删除模式,如果使用上面命 ...

  2. 使用RawComparator加速Hadoop程序

    使用RawComparator加速Hadoop程序 在前面两篇文章[1][2]中我们介绍了Hadoop序列化的相关知识,包括Writable接口与Writable对象以及如何编写定制的Writable ...

  3. 轻量级封装DbUtils&Mybatis之四MyBatis主键

    MyBatis主键 不支持对象列表存储时对自增id字段的赋值(至少包括3.2.6和3.3.0版本),如果id不是采用底层DB自增主键赋值,不必考虑此问题 温馨提示:分布式DB环境下,DB主键一般会采用 ...

  4. MQTT的知识点

    问题一:单片机缓存有限,处理能力有限的情况下,消息不可能一次发出,这种情况下要怎样通过MQTT发布消息? 先组装publish协议的头,里面写好payload的长度,通过tcp发出去,然后一点一点发p ...

  5. Unix网络编程 3.9 readline函数

    其实看APUE时就想试着写些简单的stdio函数了,但是一直没实践,看到这里时发现书上写得不完整,便敲代码试了下. 第1个readline速度非常慢原因在于每次读取字符都执行了系统调用read(),而 ...

  6. Jquery each循环中中断

    在each代码块内不能使用break和continue,要实现break和continue的功能的话,要使用其它的方式 break----用return false; continue --用retu ...

  7. Java 静态对象 static

    什么是静态变量 大家都知道,我们可以基于一个类创建多个该类的对象,每个对象都拥有自己的成员,互相独立. 然而在某些时候,我们更希望该类所有的对象共享同一个成员.此时就是 static 大显身手的时候了 ...

  8. [Java.Web]Tomcat 常用配置

    1. web.xml 文件最下方内容 (X:\apache-tomcat-7.0.77\conf\ 目录下) <welcome-file-list> <welcome-file> ...

  9. 常见的sql server 链接问题------持续更新

    问题1:超时时间已到.超时时间已到,但是尚未从池中获取连接.出现这种情况可能是因为所有池连接均在使用,并且达到了最大池大小 再查询窗口输入exec sp_who2进行查询链接消耗资源 可能出现的情况是 ...

  10. C/C++程序内存情况

    一个由C/C++编译的程序占用的内存分为以下几个部分 1.栈区(stack)— 由编译器自动分配释放 ,存放函数的参数值,局部变量的值等.其操作方式类似于数据结构中的栈. 2.堆区(heap) — 一 ...