JS图片加载淡入淡出效果实现教程

JavaScript实现图片加载淡入淡出效果的方法

本文分享了一段使用JavaScript实现图片加载时淡入淡出效果的代码示例，供读者参考。

HTML部分

首先介绍图片标签的编写方式。


<img data-src="/path/to/image.jpg" alt="">

需要将图片的实际地址放入data-src属性中，而src属性则填写一张默认图片的地址。

CSS部分

对于所有包含data-src属性的图片，我们将其初始状态设置为不可见，并通过透明度进行控制。


img {
 opacity: 1;
 transition: opacity 0.3s;
}

img[data-src] {
 opacity: 0;
}

这样做的目的是在图片加载完成后，能够看到淡入的效果。

JavaScript部分

最终我们会移除data-src属性，并替换为src属性，但这一步骤仅在图片加载成功后执行。


[].forEach.call(document.querySelectorAll('img[data-src]'), function(img) {
 img.setAttribute('src', img.getAttribute('data-src'));
 img.onload = function() {
  img.removeAttribute('data-src');
 };
});

与其他图片延迟加载技术相比，这种方法非常简洁，几乎不需要额外的条件支持，可以灵活应用于各种场景。

然而，简单也有其局限性。该方法不具备将图片滚动到可视窗口内再加载的功能。因此，具体使用哪种技术，还需根据实际场景决定。

以下是lazyload.js的代码


var lazyLoad = {
 init: function() {
  var that = this;
  that.onerrorImgUrl = "data-error"; //图片加载失败用什么图片替换
  that.srcStore = "data-src"; //图片真实地址存放的自定义属性
  that.class = "lazy-img"; //惰性加载的图片需要添加的class
  that.sensitivity = 50; //该值越小，惰性越强（加载越少）
  minScroll = 5,
  slowScrollTime = 200;

  document.addEventListener("scroll", function() {
   that.changeimg();
  });

  setTimeout(function() {
   that.trigger();
  }, 100);

 },
 scanImage: function() {
  var that = this;
  var imgList = [];
  var allimg = [].slice.call(document.querySelectorAll('img.' + that.class + ''));
  allimg.forEach(function(ele) {
   if (!that.isLoadedImageCompleted(ele)) {
    imgList.push(ele);
   }
  });

  that.imglistArr = imgList;
 },
 isLoadedImageCompleted: function(ele) {
  return (ele.getAttribute('data-loaded') == '1')
 },
 trigger: function() {
  var that = this;
  eventType = that.isPhone && "touchend" || "scroll";
  that.fireEvent(document, eventType);
  //$(window).trigger(eventType);
 },
 fireEvent: function(element, event) {
  // 其他标准浏览器使用dispatchEvent方法
  var evt = document.createEvent('HTMLEvents');
  // initEvent接受3个参数：
  // 事件类型，是否冒泡，是否阻止浏览器的默认行为
  evt.initEvent(event, true, true);
  return !element.dispatchEvent(evt);
 },
 changeimg: function() {
  function loadYesOrno(img) {
   var windowPageYOffset = window.pageYOffset,
    windowPageYOffsetAddHeight = windowPageYOffset + window.innerHeight,
    imgOffsetTop = img.getBoundingClientRect().top + window.pageYOffset;
   return imgOffsetTop >= windowPageYOffset && imgOffsetTop - that.sensitivity <= windowPageYOffsetAddHeight;
  }

  function loadImg(img, index) {

   var imgUrl = img.getAttribute(that.srcStore);

   img.setAttribute("src", imgUrl);

   img.onload || (img.onload = function() {
     img.classList.remove(that.class);
     img.setAttribute('data-loaded', 1)
     img.removeAttribute('data-src');
     //$(this).removeClass(that.class).getAttribute('data-loaded',1),
     that.imglistArr[index] = null;
     img.onerror = img.onload = null;
    },
    img.onerror = function() {
     img.src = img.getAttribute(that.onerrorImgUrl);
     img.classList.remove(that.class);
     img.classList.add("lazy-err");
     img.setAttribute('data-loaded', 0);
     //$(this).removeClass(that.class).getAttribute('data-loaded',0),
     that.imglistArr[index] = null,
      img.onerror = img.onload = null
    });

   var newImgStack = [];
   that.imglistArr.forEach(function(ele) {

    //img标签可见并且加载未完成
    if (!that.isLoadedImageCompleted(ele)) {
     newImgStack.push(ele);
    }
   });
   that.imglistArr = newImgStack;
  }

  var that = this;
  that.scanImage();
  that.imglistArr.forEach(function(val, index) {

   if (!val) return;
   var img = val;
   if (!loadYesOrno(img) || that.isLoadedImageCompleted(img)) return;

   if (!img.getAttribute(that.srcStore)) return;

   loadImg(img, index);
  })

 }
};

以上就是本文的全部内容，希望对您的学习有所帮助，也欢迎大家继续支持本站。

JavaScript实现图片加载淡入淡出效果的方法

JavaScript实现图片加载淡入淡出效果的方法

HTML部分

CSS部分

JavaScript部分

实用工具推荐