分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 技术分享

jquery offset positon 获取位置不准的解决方法

发布时间:2023-09-06 01:18责任编辑:顾先生关键词:暂无标签

问题:

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

原文地址:http://www.cnblogs.com/rysinal/p/7682147.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved