加载时显示img fadeIn效果

是一种常见的前端开发技术，用于在图片加载完成前显示一个占位图，并在图片加载完成后以淡入的方式显示图片。这种效果可以提升用户体验，使页面加载过程更加平滑。

具体实现这种效果的方法有多种，以下是一种常见的实现方式：

1. 首先，在HTML中使用一个占位图作为图片的初始显示状态，可以是一个固定大小的div元素或者一个预设的图片。

<div id="imageContainer">
  <img src="placeholder.jpg" alt="Placeholder Image">
</div>

1. 在CSS中设置占位图的样式，例如设置宽度、高度、背景颜色等。

#imageContainer {
  width: 300px;
  height: 200px;
  background-color: #ccc;
}

1. 使用JavaScript监听图片的加载事件，并在图片加载完成后添加淡入效果。

var image = new Image();
image.src = "image.jpg";
image.onload = function() {
  var imageContainer = document.getElementById("imageContainer");
  imageContainer.style.backgroundImage = "url('" + image.src + "')";
  imageContainer.classList.add("fade-in");
}

1. 在CSS中定义淡入效果的样式，例如使用CSS过渡或动画来实现淡入效果。

#imageContainer.fade-in {
  opacity: 1;
  transition: opacity 0.5s;
}

这样，在图片加载完成后，图片将以淡入的方式显示在占位图的位置上。

对于腾讯云相关产品，可以使用腾讯云对象存储（COS）来存储和管理图片资源。腾讯云对象存储（COS）是一种高可用、高可靠、低成本的云存储服务，适用于各种场景下的数据存储和传输需求。您可以通过以下链接了解更多关于腾讯云对象存储（COS）的信息：

腾讯云对象存储（COS）产品介绍：https://cloud.tencent.com/product/cos

请注意，以上答案仅供参考，具体实现方式和推荐的产品可能因实际需求和环境而异。