js,jquery解决 图片加载-滚动底部 问题

js,jquery解决 图片加载-滚动底部 问题

问题描述:让图片加载完成后,再执行滚动函数,避免出现图片加载一半的时候,滚动下来底部只出现半张图片。

这里记录4种测试成功方式:(适用于不容易找到图片位置的情况,否则直接onload函数即可)

// 1. 使用超时函数setTimeout来延迟执行
setTimeout(()=>{
    _this.scrollBottom();
}, 10)

// 2. 新建一个img对象,模拟图片加载同步完成(暂时最优)
var img = new Image();
img.src = '/' + res.result.path;
img.onload = function(){
    _this.scrollBottom();
}

// 3. 获取页面所有图片资源,然后判断是否全部加载完成,进行调用滚动函数(for循环和定时回调,比较耗资源)
function areAllResourcesLoaded(){
    var allResources = document.querySelectorAll('img');
    console.log('length' + allResources.length)
    // 判断是否全部加载完
    for (var i = allResources - 4; i < allResources.length; i++){
        if (!allResources[i].complete){
            return false;
        }
    }
    return true;
}
var checkInterval = setInterval(function() {
    if (areAllResourcesLoaded()) {
      clearInterval(checkInterval); // 停止定时器
      _this.scrollBottom();
    }
  }, 10);

// 4. jquery $post方法,异步回调,能够适用于资源加载等问题,在这个方法里面添加调用滚动函数,可以达到完美的效果,这是我偶然测试调整位置发现的,然后才搜$post方法的作用,有兴趣可以去看看
$post(){
    // 调用滚动函数
    _this.scrollBottom();
}

你可能感兴趣的:(前端篇,javascript,前端,开发语言)