问题:

本地开发时,由于使用了图片,而且使用了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. 空间的搜索与R树

    在现实地图应用中,有个比较常见的问题,比如,你到了一个地方,想查查附近1km内有什么饭店. 这时地图应用就可以马上查询出周围有什么饭店,如果让你设计,你会怎么设计.假设局限在中国的地图上,共有1000 ...

  2. 在Mac OS上搭建Python的开发环境

    本文转载自:http://www.jb51.net/article/76931.htm 一. 安装python mac系统其实自带了一个python的执行执行环境,用来运行python还行,但是开发可 ...

  3. 一段四表联查外加字符拼接的sql,留存备查

    select DISTINCT [P_ID],[P_CODE],[P_CODE_OLD],[P_NAME],[NATIVE_PLACE],[GENDER],[EDUCATION],[EMPLOY_DA ...

  4. mqtt 异步消息 长连接 解析

    mqtt 是轻量级基于代理的发布/订阅的消息传输协议,设计思想是开放,简单,轻量级,且易于实现,这些优点使得他受用于任何环境 该协议的特点有: 使用发布/订阅消息的模式,提供一对多的消息发布,解除应用 ...

  5. 用 Linux blkid 命令查找块设备详情

    今天我们将会向你展示如何使用 lsblk 和 blkid 工具来查找关于块设备的信息,我们使用的是一台安装了 CentOS 7.0 的机器. lsblk lsblk 是一个 Linux 工具,它会显示 ...

  6. 北京师范大学第十六届程序设计竞赛决赛 I 如何办好比赛

    链接:https://www.nowcoder.com/acm/contest/117/I来源:牛客网 如何办好比赛 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 32768K,其他 ...

  7. Nginx启停

    启动nginx /usr/local/nginx/nginx #不指定配置文件地址/usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx. ...

  8. Tomcat的文件列表服务

    今天需要将分析后的日志结果发布到网站上供其他人浏览,虽然用户可以通过直接使用url链接可以访问到对应的文件,但是毕竟还是不方便,没有一个类似文件浏览器的东西,可以直接查看文件夹和文件列表. 其实这样的 ...

  9. 在使用Ajax请求返回json数据的时候IE浏览器弹出下载保存对话框的解决方法

    在使用Ajax请求返回json数据的时候IE浏览器弹出下载保存对话框的解决方法 最近在做一个小东西,使用kindeditor上传图片的时候,自己写了一个上传的方法,按照协议规则通过ajax返回json ...

  10. Fiddler监控面板显示Server栏(Fiddler v5.0)

    1.点击Rules下的Customize Rules.js,会打开Fiddler ScriptEditor 2.去掉 UI.lvSessions.AddBoundColumn("Server ...