js瀑布流中图片加载导致渲染重叠解决方案

黄良钵

分类: 程序开发 0 0

问题:每个item里面包含图片,由于加载延迟,导致渲染重叠。

解决方法:等待图片加载完毕再次渲染。

判断图片加载完毕方法:

//判断图片加载完成后
var t_img; // 定时器
var isLoad = true; // 控制变量



// 判断图片加载的函数
function isImgLoad(callback) {
    // 注意我的图片类名都是cover,因为我只需要处理cover。其它图片可以不管。
    // 查找所有封面图,迭代处理
    $('.cover').each(function () {
        // 找到为0就将isLoad设为false,并退出each
        
        if (this.height === 0) {
            isLoad = false;
            return false;
        }
    });
        // 为true,没有发现为0的。加载完毕
    if (isLoad) {
        clearTimeout(t_img); // 清除定时器
        // 回调函数
        callback();
        // 为false,因为找到了没有加载完成的图,将调用定时器递归
    } else {
        isLoad = true;
        t_img = setTimeout(function () {
            isImgLoad(callback); // 递归扫描
        }, 500); // 我这里设置的是500毫秒就扫描一次,可以自己调整
    }
}

在数据加载完的地方添加 isImgLoad

$.getJSON("/mock/index/team.json", {}, res => {
  let html = `<ul class="masonry-list">`;

  for (const i of res) {
    html += ` <li class="masonry-item">
            <h4 class="masonry-item-tit">${i.title}</h4>
            <img class="cover" src="${i.img}" alt="${i.title}">
        </li>`
  }
  html += '</ul>'
  $('#team .team-main').append(html)
   // 忽略以上代码
  // 判断图片加载状况,加载完成后回调
  isImgLoad(function () {
    // 加载完成,初始化瀑布流
    init('team') // 初始化瀑布流方法
  });

})

内容参考:予早

  • 0人 Love
  • 0人 Haha
  • 0人 Wow
  • 0人 Sad
  • 0人 Angry

作者简介:黄良钵

打赏

博客站长,前端开发工程师

共 0 条评论关于 “js瀑布流中图片加载导致渲染重叠解决方案”

Loading...