用JS在2张图像之间替代，而不使用GIF

Question

我需要在页面上交替加载带有霓虹灯风格的图像和不加载霓虹灯的图像（仅在图像的某些部分，例如轮廓上）。因此，我决定用JS替换图像会提高性能，并提高站点速度（主要是加载时间）。工作代码如下：

document.addEventListener("DOMContentLoaded", function() {
  /*#__alternate image _1 to _2__*/
  var alternate12 = document.querySelectorAll('.alternate12');
  var alternate12mob = document.querySelectorAll('.alternate12mob');
  var mobileWidth = window.matchMedia('(max-width: 767px)');

  if (alternate12 || alternate12mob) {
    alternateFunc();
  }

  function alternateFunc() {
    if (mobileWidth.matches) {
      alternate12Mobile();
    } else {
      alternate12Desktop();
    }
  }

  function alternate12Desktop() {
    alternate12.forEach(function(linkElement, i) {
      if (linkElement.hasAttribute("srcset")) {
        var images = [linkElement.srcset, `${linkElement.srcset.slice(0,-5)}2.jpg`];
        var i = 0;
        //loop through the images array
        var renew = setInterval(function() {
          if (images.length == i) {
            i = 0;
          } else {
            linkElement.srcset = images[i];
            i++;
          }
        }, 400);
      } else if (linkElement.hasAttribute("src")) {
        var images = [linkElement.src, `${linkElement.src.slice(0,-5)}2.jpg`];
        var i = 0;
        //loop through the images array
        var renew = setInterval(function() {
          if (images.length == i) {
            i = 0;
          } else {
            linkElement.src = images[i];
            i++;
          }
        }, 400);
      }
    });
  }

  function alternate12Mobile() {
    alternate12mob.forEach(function(linkElement, i) {
      if (linkElement.hasAttribute("srcset")) {
        var images = [linkElement.srcset, `${linkElement.srcset.slice(0,-5)}2.jpg`];
        var i = 0;
        //loop through the images array
        var renew = setInterval(function() {
          if (images.length == i) {
            i = 0;
          } else {
            linkElement.srcset = images[i];
            i++;
          }
        }, 400);
      } else if (linkElement.hasAttribute("src")) {
        var images = [linkElement.src, `${linkElement.src.slice(0,-5)}2.jpg`];
        var i = 0;
        //loop through the images array
        var renew = setInterval(function() {
          if (images.length == i) {
            i = 0;
          } else {
            linkElement.src = images[i];
            i++;
          }
        }, 400);
      }
    });
  }
})

<picture>
  <source media="(min-width: 768px)" class="alternate12" srcset="aaa_1.jpg?$staticlink$">
  <source media="(max-width: 767px)" class="alternate12mob" srcset="aaa_mob_1.jpg?$staticlink$">
  <img class="i-image-1928 alternate12" src="aaa_1.jpg?$staticlink$" alt="">
</picture>

我正在尝试学习JS，而DRY原理似乎总是很关键，在这些if (src) and if (srcset)代码块中我怎么不能重复自己四次。换句话说，如何使此代码更好地遵循DRY。我知道我缺少一种简单的方法，因为其中存在很多重复...

Answer 1

代替编写linkElement.srcset，您可以执行变量/属性attributeName='srcset'

var attributeName = 'srcset'
var images = [linkElement[attributeName], `${linkElement[attributeName].slice(0,-5)}2.jpg`];
var i = 0;
//loop through the images array
var renew = setInterval(function() {
  if (images.length == i) {
    i = 0;
  } else {
    linkElement[attributeName] = images[i];
    i++;
  }
}, 400);

所以现在代码块中的唯一区别是您分配给var attributeName的值。

要恢复该代码，您需要将其包装在一个函数中：

function changeImage(attributeName, linkElement, images) {
  var images = [linkElement[attributeName], `${linkElement[attributeName].slice(0,-5)}2.jpg`];
  var i = 0;
  //loop through the images array
  var renew = setInterval(function() {
    if (images.length == i) {
      i = 0;
    } else {
      linkElement[attributeName] = images[i];
      i++;
    }
  }, 400);
}

现在您可以使用changeImage('srcset', linkElement, images)或changeImage('src', linkElement, images)调用的两种情况都具有通用函数>

因此使用相同的技术将alternate12...更改为alternate12Images(alternate12)和alternate12Images(alternate12mob)