jquery scroll 滚动加载列表 获取腾讯云图片像素信息

简介: 整体列表通过拉取腾讯云COS文件桶信息,同时图片需要展示像素信息

场景描述

bootstarp列表加载图片时需要同时获取图片的像素(宽and高),对于腾讯云这类远程存储获取图片来说,虽然也可以通过java后台调用腾讯云接口获取图片像素,但是在列表加载大量图片并且没有分页的情况下,如果通过后台逐个获取图片像素信息返回给前台页面渲染的话,会导致前台页面迟迟加载不出来,且有浏览器内存耗尽卡死的风险,并且腾讯云获取图片像素信息的接口还有频限100的限制,这就更导致了通过后台获取图片像素方案的不适用,那么如果通过页面jquery获取图片像素的时候当图片量很大的时候也是会出现卡顿,加载慢的情况,这个时候就考虑的热区内图片展示像素,非热区内图片待鼠标下滑啊时再加载像素信息方案的产生。

问题处理

首先找到前端同事帮忙写一下scroll方法的加载结构和页面热区的宽高计算,然后补充具体参数信息及业务逻辑信息

列表html结构如下

image.png

代码如下

var start = function() {
      var imgs = $('.bootstrap-table tbody>tr').not('.dataloaded'); // 选择出未加载的图片
      if (imgs.length) {
        // 遍历循环
        $.each(imgs, function (k, y) {
          var _this = $(this), _o = _this.offset().top, _h = $('#tableDiv').scrollTop() + $('.search-collapse').height() + $('#tableDiv').height();
          // 可视区判断
          if (_o <= _h) {
            var filenameobj = _this.find("td:eq(1)");
            var fileType = _this.find("td:eq(3)").text();
            // 加载图片,并标记
            loadImg(_this);
            if (fileType != "-" && ("jpg" == fileType.toLowerCase() || "png" == fileType.toLowerCase() ||
                "gif" == fileType.toLowerCase() || "jpeg" == fileType.toLowerCase())) {
              var path = $("#title").val();
              var imgurl = domain+path+filenameobj.find('a').attr('title');
              var img = new Image(); img.src = imgurl;
              if (img.complete) {
                var _w = img.width, _h = img.height;
                var text = filenameobj.text();
                var text2 = text+"("+_w+"*"+_h+")";
                filenameobj.find('a').find('span').text(text2);
              }else {
                img.onload = function () {
                  var _w = img.width, _h = img.height;
                  var text = filenameobj.text();
                  var text2 = text+"("+_w+"*"+_h+")";
                  filenameobj.find('a').find('span').text(text2);
                }
              }
               //console.log("start()======"+filenameobj.find('a').find('span').text());
            }
          } else { // ps:超出可视区外的图片不再循环,防止资源消耗过多
            return false;
          }
        })
      } else {
        // 所有图片都已加载,禁止事件监听
        $('#tableDiv').off('scroll');
      }
}
function loadImg($img) {
      //$img.attr('src', $img.attr('data-src'));
      $img.addClass('dataloaded');
}

bootstarp列表加载增加 onLoadSuccess()  待列表加载完成之后执行start()方法给热区内img赋值像素

function onLoadSuccess(res){
  start();
  // 绑定 scroll 事件,用于监听元素是否进入可视区
  $('#tableDiv').scroll(function () {
    start();
  })
}

效果如图

image.png初始化列表时执行一次start(),给热区内图片赋值像素,待滚动鼠标时再拉去当前页面热区内未加载图片像素信息的图片像素

其他问题处理

由于业务需要,除了列表页,我们同时增加了视图模式,效果如图

image.png

列表增加了滚动加载图片像素信息的方法,那么视图模式同样也需要,视图代码结构

image.png

增加start1()方法用于针对视图模式处理

var start1 = function() {
  var imgs = $('.trdata').not('.dataloaded'); // 选择出未加载的图片
  //console.log("----------run-------------------"+imgs.length)
  if (imgs.length) {
    // 遍历循环
    $.each(imgs, function (k, y) {
      var _this = $(this), _o = _this.offset().top, _h = $('#tableDiv').scrollTop() + $('.search-collapse').height() + $('#tableDiv').height();
      // 可视区判断
      if (_o <= _h) {
        var textcenterdivobj = _this.find("div:eq(1)").find("a").find("div");
        //console.log("111"+textcenterdivobj.html());
        var img = textcenterdivobj.find("img");
        var fileType = img.attr("data-type");
        //console.log("222"+fileType);
        // 加载图片,并标记
        loadImg(_this);
        if (fileType != undefined && fileType != "-" && ("jpg" == fileType.toLowerCase() || "png" ==
            fileType.toLowerCase() ||
            "gif" == fileType.toLowerCase() || "jpeg" == fileType.toLowerCase())) {
          var imgurl = img.attr("src");
          //console.log("333"+imgurl);
          var namediv = textcenterdivobj.find("div").find("div");
          var text = namediv.text();
          var img = new Image(); img.src = imgurl;
          if (img.complete) {
            var _w = img.width, _h = img.height;
            var text2 = text+"("+_w+"*"+_h+")";
            namediv.text(text2);
          }else {
            img.onload = function () {
              var _w = img.width, _h = img.height;
              var text2 = text + "(" + _w + "*" + _h + ")";
              namediv.text(text2);
            }
          }
          //console.log("start1()======"+namediv.text());
        }
      } else { // ps:超出可视区外的图片不再循环,防止资源消耗过多
        return false;
      }
    })
  } else {
    // 所有图片都已加载,禁止事件监听
    $('#tableDiv').off('scroll');
  }
}

视图模式的加载效果

image.png

既然加了视图模式,那么就会涉及到视图和列表切换时方法的销毁问题,因为不销毁的话,在列表模式下,滚动的话也会执行视图模式的滚动方法导致资源浪费,关闭滚动方法的处理如下

//切换列表和块的方法
function toggleCustomView(){
  if($('#customViewDiv').is(':hidden')){
    $(window).off('scroll',start);
    start1();
    // 绑定 scroll 事件,用于监听元素是否进入可视区
    $('#tableDiv').scroll(function () {
      start1();
    })
    $('#customViewDiv').show();
    $('#bootstrap-table').hide();
  }else{
    $(window).off('scroll',start1);
    $('#tableDiv').scroll(function () {
      start();
    })
    $('#customViewDiv').hide();
    $('#bootstrap-table').show();
  }
}

如此的话就解决了问题也没有导致资源重复加载。

相关文章
|
3月前
|
JavaScript
基于jQuery的公告无限循环滚动实现代码
基于jQuery的公告无限循环滚动实现代码
21 0
|
5月前
|
JavaScript
jQuery 展开列表
jQuery 展开列表
21 0
|
5月前
|
JavaScript
jQuery 插件自用列表
jQuery 插件自用列表
26 0
|
1月前
|
JavaScript
jQuery图片延迟加载插件jQuery.lazyload
jQuery图片延迟加载插件jQuery.lazyload
|
4月前
|
缓存 前端开发 JavaScript
【前端用法】jquery获取当前页面的URL信息
【前端用法】jquery获取当前页面的URL信息
45 0
|
5月前
|
JavaScript
jQuery lazyload.js 懒加载可视范围图片
jQuery lazyload.js 懒加载可视范围图片
37 0
|
1月前
|
JavaScript 前端开发
jquery怎么给循环出来的列表(类似于text框)取值和赋值
jquery怎么给循环出来的列表(类似于text框)取值和赋值
14 0
jquery怎么给循环出来的列表(类似于text框)取值和赋值
|
1月前
|
JavaScript 前端开发
jquery酷炫的马赛克图片还原动画代码
jquery酷炫的马赛克图片还原动画代码,jquery马赛克图片动画,js酷炫图片代码,马赛克图片js还原效果,js图片分散汇聚效果素材
30 1
|
3月前
|
JavaScript 前端开发
jQuery点击图片来回切换功能
jQuery点击图片来回切换功能
37 0
jQuery点击图片来回切换功能
|
3月前
|
JavaScript
jQuery实现大屏滚动播放的效果
jQuery实现大屏滚动播放的效果
14 0

热门文章

最新文章

相关产品

  • 云迁移中心
  • 相关课程

    更多