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