首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

检查图片的SRCset是否加载完成的Jquery函数

可以使用以下代码:

代码语言:txt
复制
function checkImageLoaded(imageSelector, callback) {
  var images = $(imageSelector);
  var loadedCount = 0;
  var totalCount = images.length;

  images.each(function() {
    if (this.complete) {
      loadedCount++;
    } else {
      $(this).on('load', function() {
        loadedCount++;
        if (loadedCount === totalCount) {
          callback(true);
        }
      });
    }
  });

  if (loadedCount === totalCount) {
    callback(true);
  } else {
    callback(false);
  }
}

这个函数接受两个参数:imageSelector是图片的选择器,可以是类名、ID或其他有效的jQuery选择器;callback是回调函数,当所有图片加载完成时会调用该函数,并传入一个布尔值参数表示是否所有图片都加载完成。

使用示例:

代码语言:txt
复制
checkImageLoaded('.my-images', function(isLoaded) {
  if (isLoaded) {
    console.log('所有图片加载完成');
  } else {
    console.log('部分或全部图片未加载完成');
  }
});

这个函数会遍历所有匹配imageSelector的图片元素,检查它们的complete属性是否为true,如果是则表示该图片已加载完成,计数器loadedCount加一;如果不是,则绑定load事件,在图片加载完成时计数器加一。最后,比较计数器loadedCount和图片总数totalCount,如果相等则表示所有图片都加载完成,调用回调函数并传入true;否则,表示部分或全部图片未加载完成,调用回调函数并传入false

这个函数可以用于检查图片的SRCset是否加载完成,以便在需要等待图片加载完成后执行其他操作,例如调整布局或显示加载完成的提示信息。

腾讯云相关产品和产品介绍链接地址:

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • image的srcset属性

    介绍 响应式页面中经常用到根据屏幕密度设置不同的图片。这个时候肯定会用到image标签的srcset属性。srcset属性用于设置不同屏幕密度下,image自动加载不同的图片。用法如下: 使用上面的代码,就能实现在屏幕密度为1x的情况下加载image-128.png, 屏幕密度为2x时加载image-256.png。 新标准 按照上面的实现,不同的屏幕密度都要设置图片地址,目前的屏幕密度有1x,2x,3x,4x四种,如果每一个图片都设置4张图片的话,太麻烦了。所以就有了新的srcset标准。代码如下: 其中srcset指定图片的地址和对应的图片质量。sizes用来设置图片的尺寸零界点。 对于srcset里面出现了一个w单位,可以理解成图片质量。如果可视区域小于这个质量的值,就可以使用,当然,浏览器会自动选择一个最大的可用图片。 sizes语法如下: sizes="[media query] [length], [media query] [length] ... " 上面例子中的sizes就是指默认显示128px, 如果视区宽度大于360px, 则显示340px。 总结 img的srcset属性方便的解决了页面图片适应不同屏幕密度的情况。目前除了IE没有兼容到,已经全部都兼容了,可以放心使用。

    01
    领券