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();
}复制