问题:

本地开发时,由于使用了图片,而且使用了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. 修改selinux出现setsebool: SELinux is disabled.的解决方法

    1.vi /etc/vsftpd/vsftpd.conf # You may specify an explicit list of local users to chroot() to their ...

  2. Centos7下安装共存版本Python

    最近遇到个问题, 本机环境已安装了Python2   已安装的应用依赖于Python2,不能替换原系统的Python环境,但新安装的应用需要依赖于Python3 需要安装两个不同版本Python,解决 ...

  3. Toxiproxy 网络情况模式代理

    1. 介绍 Toxiproxy is a framework for simulating network conditions. It's made specifically to work in ...

  4. C语言控制台窗体图形界面编程(八):鼠标事件

           上次讲的是键盘事件,这次我们介绍鼠标事件. 以下先介绍下鼠标事件的结构体以及相关信息. typedef struct _MOUSE_EVENT_RECORD //鼠标事件结构体 { CO ...

  5. 关于tab的切换之共用html页面,而引发的页面跳转错乱问题

    在一个项目中的同一个模块中,有多个tab(并且多个tab对应的页面结构完全一样),tab的每次切换,不同tab调用不同的接口,利用一个switch进行判断,根据当前的类型去调用不同的接口,返回不同数据 ...

  6. JDBC--数据库链接及相关方法的封装

    使用的是MySQL数据库,首先导入驱动类,然后根据数据库URL和用户名密码获得数据的链接.由于使用的是MySQL数据库,它的URL一般为,jdbc:mysql://主机地址:端口号/库名. 下面是封装 ...

  7. java代码。。。圆的面积好搞人。。。不是一般的搞人。。。欢迎指点指点

    package com.ll; public class Class3 {     private String name;     private int age;     private int ...

  8. zufeoj NO.1(结构体简单题)

    NO.1 时间限制: 1 Sec  内存限制: 128 MB提交: 457  解决: 172[提交][状态][讨论版] 题目描述 所谓NO.1,就是所有成绩都排在第一的同学,我们假设每个人只有理科,文 ...

  9. (转) docker跨主机 macvlan 网络配置

    原文链接 https://github.com/alfredhuang211/study-docker-doc/blob/master/docker%E8%B7%A8%E4%B8%BB%E6%9C%B ...

  10. @BindingAnnotation

    (1) 如果 一个接口只有一个实现,使用这种连接注解就可以: bind(XXInterface.class).to(XXImpl.class); @Inject XXInterface xxInter ...