offset().top获取的数值不一样

Question

最近做一个官网, 在添加动画效果的过程中碰到一个疑难杂症, 就是用jquery获取元素的偏移量($(el).offset().top)的时候新开页面的时候是一个数值, 按F5刷新之后页面还是在原来的位置, 但是他的偏移值却发生了变化.

1. 这是我执行动画的代码:

var downTop = $(".zxg-download").offset().top;
  var windowTop;
  $(window).scroll(function () {
    windowTop = $(document).scrollTop();
    console.log('downTop--' + downTop + ',' + 'windowTop--' + windowTop);
    if(windowTop >= (downTop - 200)) {
      $(".download-img").animate({left: '0'},2000);
    }
  });

1. 新开页面是滚动到指定位置, 打印出来的值是:

1. 在当前页面按F5刷新之后, 打印出来的值是:

1. 相差了1000像素左右, 影响很大, 这里有需要说明的是我的头部和底部是通过.load()加载出来的(而且是我在引入上面的js文件之后,直接在页面的写的代码,但是头部最多200像素,所以应该不是这里的问题):

$(function() {
    // 引入页面公共部分
    $(".header").load("./header.html");
    $(".footer").load("./footer.html");
  })

想问问大家有没有解决方案! 感谢!!!

Answer 1

1. 终于找到问题来源了, 果然是页面加载的问题, 在页面顶部有一组轮播图, 我通过判断屏幕尺寸来动态获取图片资源, 代码如下:

// 轮播图动态选择图片
  var items = $('.carousel-inner .item');
  $(window).on('resize',function () {
    var width = $(window).width();
    if(width >= 768) {
      $(items).each(function (index,value) {
        var imgSrc = $(this).data("largeImage");
        $(this).find(".carousel-box").html($('<a href="javascript:;" class="pcImg"></a>').css("backgroundImage","url('"+imgSrc+"')"));
      });
    }else {
      $(items).each(function (index,value) {
        var imgSrc = $(this).data("smallImage");
        $(this).find(".carousel-box").html('<a href="javascript:;" class="mobileImg"><img src="'+imgSrc+'" alt="..."></a>');
      })
    }
  }).trigger('resize');  // 自动触发事件

1. 在设置样式时我给pcImg设置了700px的高度, 图片加载较慢, 还没有设置高度就获取了动画元素的偏移量, 所以出错了;
2. 我的解决办法很简单, 就是在滚动的时候一直去获取$(".zxg-download").offset().top, 这样就不会有问题了.
3. 不知道还有没有更好的办法, 比如等到图片加载出来之后再去执行函数, 我用了$(function(){})没效果, 不知道为什么.