js實(shí)現(xiàn)圖片加載淡入淡出效果

更新時(shí)間：2021年09月17日 09:20:08 作者：櫻花爛漫0927

這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)圖片加載淡入淡出效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了js圖片加載淡入淡出效果展示的具體代碼，供大家參考，具體內(nèi)容如下

HTML代碼

首先是圖片標(biāo)記的寫法：

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

需要將圖片的地址放到 data-src 屬性里，而src值填寫默認(rèn)的一張圖片。

CSS代碼

所有具有data-src屬性的圖片，我們將其初始顯示狀態(tài)為不可見，通過(guò)透明度來(lái)調(diào)節(jié)：

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

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

這樣寫的作用是什么？等當(dāng)圖片加載時(shí)，你就能看的效果了。

JavaScript代碼

我們最終會(huì)將 data-src 屬性去掉，換成src屬性，但這是圖片加載成功后的動(dòng)作：

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

相比起其它各種的圖片延遲加載技術(shù)，這種方法非常的簡(jiǎn)單，它幾乎不要求其它任何條件，可以用在任何地方，使用起來(lái)非常靈活。

當(dāng)然，簡(jiǎn)單有簡(jiǎn)單的好壞，也會(huì)因?yàn)楹?jiǎn)單而不足。它不具有圖片圖片滾動(dòng)到可視窗口內(nèi)再加載的功能。最終使用哪種技術(shù)，還是要看場(chǎng)景而定。

下面是lazyload.js

var lazyLoad = {
 init: function() {
  var that = this;
  that.onerrorImgUrl = "data-error"; //圖片加載失敗用什么圖片替換
  that.srcStore = "data-src"; //圖片真實(shí)地址存放的自定義屬性
  that.class = "lazy-img"; //惰性加載的圖片需要添加的class
  that.sensitivity = 50; //該值越小，惰性越強(qiáng)（加載越少）
  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) {
  // 其他標(biāo)準(zhǔn)瀏覽器使用dispatchEvent方法
  var evt = document.createEvent('HTMLEvents');
  // initEvent接受3個(gè)參數(shù)：
  // 事件類型，是否冒泡，是否阻止瀏覽器的默認(rèn)行為
  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標(biāo)簽可見并且加載未完成
    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);
  })

 }
};

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: