javascript - 仅在 IE11 中首次单击时画廊灯箱不插入图像

Question

我有一个画廊，它在除 IE11 之外的所有浏览器中都运行良好(震惊!)。

主要问题是，在 IE11 中，当您第一次单击图库元素时，它不会从数据属性中插入图像 url。如果您随后去加载下一张图片(使用灯箱导航或画廊缩略图)，img src 将更新并且工作正常。

我注意到的另一个问题仅存在于 IE11 中。gallery-navigation 计数器导航圆圈不会触发任何其他图像的加载。

我一直在环顾四周，发现 IE11 可能存在前置等问题，但我尝试更改此问题以及我在网上看到的其他一些解决方案，但我无法让画廊在 IE11 中正常工作

(function() {
  var galleryLightbox = document.querySelector('.gallery-lightbox');
  var galleryItems = document.querySelectorAll('.gallery-item');
  var closeButton = document.querySelector('.gallery-close');
  var nextButton = document.querySelector('.gallery-next');
  var previousButton = document.querySelector('.gallery-previous');
  var galleryItemIndex = 0;

  function createGalleryNavigation() {
    var navigationItemHtml = '<li class="gallery-navigation-item"><a class="gallery-navigation-button"></a></li>';
    var navigation = document.querySelector('.gallery-navigation');
    for (var i = 0; i < galleryItems.length; i++) {
      navigation.innerHTML += navigationItemHtml;
    }
  }

  createGalleryNavigation();

  var navItems = document.querySelectorAll('.gallery-navigation-button');

  function showGallery() {
    $('.gallery-lightbox').delay(200).fadeIn(300);
  }

  function hideGallery() {
    $('.gallery-lightbox').fadeOut(300);
  }

  function updateNavigation() {
    for (var i = 0; i < navItems.length; i++) {
      navItems[i].classList.remove('active');
    }
    navItems[galleryItemIndex].classList.add('active');
  }

  function showImage() {
    var imageUrl = galleryItems[galleryItemIndex].getAttribute('gallery-full-image');

    var img = document.createElement('img');
    img.src = imageUrl;

    var galleryImage = document.querySelector('.gallery-image-top');
    var oldImage = galleryImage.querySelector('img');
    if (oldImage) {
      galleryImage.removeChild(oldImage);
    }

    $('.gallery-image-top').hide().prepend(img).addClass('active').fadeIn(400);
    $('.gallery-caption p').html($('.gallery-figure img', galleryItems[galleryItemIndex]).prop('alt'));

    updateNavigation();
  }

  function getItemIndex(items, item) {
    return Array.from(items).indexOf(item);
  }

  function onGalleryItemClick(event) {
    var clickedGalleryItem = event.currentTarget;
    showGallery();
    galleryItemIndex = getItemIndex(galleryItems, clickedGalleryItem);
    showImage();
  }

  for (var i = 0; i < galleryItems.length; i++) {
    galleryItems[i].addEventListener('click', onGalleryItemClick);
  }

  function onCloseButtonClick() {
    hideGallery();
  }

  closeButton.addEventListener('click', onCloseButtonClick);

  function onNextButtonClick() {
    galleryItemIndex++;
    if (galleryItemIndex === galleryItems.length) {
      galleryItemIndex = 0;
    }
    showImage();
  }

  nextButton.addEventListener('click', onNextButtonClick);

  function onPreviousButtonClick() {
    galleryItemIndex--;
    if (galleryItemIndex === -1) {
      galleryItemIndex = galleryItems.length - 1;
    }
    showImage();
  }

  previousButton.addEventListener('click', onPreviousButtonClick);

  function onNavigationButtonClick(event) {
    var clickedNavigationItem = event.currentTarget;

    galleryItemIndex = getItemIndex(navItems, clickedNavigationItem);
    showImage();
  }

  for (var i = 0; i < navItems.length; i++) {
    navItems[i].addEventListener('click', onNavigationButtonClick);
  }

  function onKeyUp(event) {
    if (event.which === 27) {
      //Escape key up
      hideGallery();
    } else if (event.which === 39) {
      //Arrow right key up
      onNextButtonClick();
    } else if (event.which === 37) {
      //Arrow left key up
      onPreviousButtonClick();
    }
  }

  document.body.addEventListener('keyup', onKeyUp);
}());

#gallery-album {
  width: 100%;
  margin-bottom: 87px;
}

.gallery-lightbox {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999999;
}

.gallery-content {
  width: 100vw;
  height: 100vh;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.8);
}

.gallery-inner {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}

.gallery-image {
  position: relative;
  margin: 0 10%;
  display: inline-block;
}

.gallery-image img {
  max-height: 70vh;
  max-width: 100%;
}

.gallery-image-top {
  position: relative;
}

.gallery-navigation-wrapper {
  display: flex;
  position: relative;
}

.gallery-caption {
  background: white;
  width: 100%;
  padding: 35px 50px 55px;
  flex-grow: 1;
  width: 0;
}

.gallery-caption p {
  font-size: 12px;
  line-height: 16px;
  color: black;
  margin: 0;
  padding: 0;
}

.gallery-close {
  width: 40px;
  height: 40px;
  border-radius: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 20px;
  right: 20px;
  border: none;
  outline: 0;
  transform: rotate(0deg);
  transition-duration: 0.3s;
  transition-property: all;
  cursor: pointer;
}

.gallery-close:hover,
.gallery-close:active,
.gallery-close:focus {
  outline: 0;
  transform: rotate(360deg);
  background-color: rgba(255, 255, 255, 1);
}

.gallery-close:after,
.gallery-close:before {
  content: '';
  width: 20px;
  height: 2px;
  background-color: $monza;
  position: absolute;
}

.gallery-close:before {
  transform: rotate(45deg);
}

.gallery-close:after {
  transform: rotate(-45deg);
}

.gallery-control {
  width: 42px;
  height: 42px;
  border-radius: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  border: none;
  outline: 0;
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  outline: 0;
  transition-duration: 0.3s;
  transition-property: all;
}

.gallery-control:hover,
.gallery-control:active,
.gallery-control:focus {
  outline: 0;
  background-color: rgba(255, 255, 255, 1);
}

.gallery-control:after {
  content: '';
  display: inline-block;
  position: absolute;
  background-image: url(../img/arrow.png);
  background-size: 12px;
  width: 12px;
  height: 21px;
  top: 50%;
  left: 0;
  right: 0;
  margin: 0 auto;
  transform: translate(0, -50%);
}

.gallery-previous {
  left: 20px;
}

.gallery-next {
  right: 20px;
}

.gallery-next:after {
  transform: translate(0, -50%) rotate(180deg);
}

.gallery-navigation {
  list-style: none;
  padding: 0;
  margin: 0;
  position: absolute;
  display: flex;
  top: -30px;
  left: 50%;
  transform: translate(-50%);
}

.gallery-navigation-button {
  display: block;
  width: 10px;
  height: 10px;
  border: 0;
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 50%;
  margin: 0 2px;
  cursor: pointer;
}

.gallery-navigation-button.active {
  background-color: red;
}

.gallery-list {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0 -4px;
  padding: 0;
}

.gallery-item {
  position: relative;
  display: block;
  height: 224px;
  flex-grow: 1;
  margin: 0 2px 4px;
}

.gallery-item img {
  height: 224px;
  object-fit: cover;
  max-width: 100%;
  min-width: 100%;
  vertical-align: bottom;
}

.gallery-figure {
  display: block;
  width: auto;
  height: auto;
  cursor: pointer;
}

.position-relative {
  position: relative !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="gallery-album">
  <ol class="gallery-list">
    <li class="gallery-item" gallery-full-image="https://images.unsplash.com/photo-1556911073-38141963c9e0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80">
      <div class="gallery-figure">
        <img src="https://placekitten.com/g/400/224" alt="caption here">
      </div>
    </li>
    <li class="gallery-item" gallery-full-image="https://images.unsplash.com/photo-1564399331650-bbfe2aac0a04?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1268&q=80">
      <div class="gallery-figure">
        <img src="https://placekitten.com/g/400/224" alt="caption here">
      </div>
    </li>
    <li class="gallery-item" gallery-full-image="https://images.unsplash.com/photo-1564399328369-228e628d003c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80">
      <div class="gallery-figure">
        <img src="https://placekitten.com/g/400/224" alt="caption here">
      </div>
    </li>
    <li class="gallery-item" gallery-full-image="https://images.unsplash.com/photo-1560871402-467c8633acba?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80">
      <div class="gallery-figure">
        <img src="https://placekitten.com/g/400/224" alt="caption here">
      </div>
    </li>
    <li class="gallery-item" gallery-full-image="https://images.unsplash.com/photo-1564408512035-6597e7afd94e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80">
      <div class="gallery-figure">
        <img src="https://placekitten.com/g/400/224" alt="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et ">
      </div>
    </li>
    <li class="gallery-item" gallery-full-image="https://images.unsplash.com/photo-1564415637254-92c66292cd64?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=675&q=80">
      <div class="gallery-figure">
        <img src="https://placekitten.com/g/400/224" alt="caption here">
      </div>
    </li>
    <li class="gallery-item" gallery-full-image="https://images.unsplash.com/photo-1564419795513-ef6e58aa3c55?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80">
      <div class="gallery-figure">
        <img src="https://placekitten.com/g/400/224" alt="caption here">
      </div>
    </li>
    <li class="gallery-item" gallery-full-image="https://images.unsplash.com/photo-1564661610655-e7a2a110196a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1355&q=80">
      <div class="gallery-figure">
        <img src="https://placekitten.com/g/400/224" alt="caption here">
      </div>
    </li>
    <li class="gallery-item" gallery-full-image="https://images.unsplash.com/photo-1564537392312-9b83755aae5d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80">
      <div class="gallery-figure">
        <img src="https://placekitten.com/g/400/224" alt="caption here">
      </div>
    </li>
    <li class="gallery-item" gallery-full-image="https://images.unsplash.com/photo-1564506667932-789f87dfaafe?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=701&q=80">
      <div class="gallery-figure">
        <img src="https://placekitten.com/g/400/224" alt="caption here">
      </div>
    </li>
    <li class="gallery-item" gallery-full-image="https://images.unsplash.com/photo-1564507004663-b6dfb3c824d5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1267&q=80">
      <div class="gallery-figure">
        <img src="https://placekitten.com/g/400/224" alt="caption here">
      </div>
    </li>
    <li class="gallery-item" gallery-full-image="https://images.unsplash.com/photo-1564505971742-18360fa287eb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1489&q=80">
      <div class="gallery-figure">
        <img src="https://placekitten.com/g/400/224" alt="caption here">
      </div>
    </li>
  </ol>
  <div class="gallery-lightbox">
    <div class="gallery-content">
      <div class="gallery-inner">
        <div class="gallery-image">
          <div class="gallery-image-top position-relative">
            <button class="gallery-close"></button>
            <button class="gallery-control gallery-previous"></button>
            <button class="gallery-control gallery-next"></button>
          </div>
          <div class="gallery-navigation-wrapper position-relative">
            <ol class="gallery-navigation"></ol>
            <div class="gallery-caption">
              <p></p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

这是一个JSFiddle画廊的。

Answer 1

我尝试使用您的代码创建示例，它会向我显示此错误:

Error: Object doesn't support property or method 'from'

添加以下polyfill后，代码在IE浏览器上运行良好:

    // Production steps of ECMA-262, Edition 6, 22.1.2.1
    if (!Array.from) {
        Array.from = (function () {
            var toStr = Object.prototype.toString;
            var isCallable = function (fn) {
                return typeof fn === 'function' || toStr.call(fn) === '[object Function]';
            };
            var toInteger = function (value) {
                var number = Number(value);
                if (isNaN(number)) { return 0; }
                if (number === 0 || !isFinite(number)) { return number; }
                return (number > 0 ? 1 : -1) * Math.floor(Math.abs(number));
            };
            var maxSafeInteger = Math.pow(2, 53) - 1;
            var toLength = function (value) {
                var len = toInteger(value);
                return Math.min(Math.max(len, 0), maxSafeInteger);
            };

            // The length property of the from method is 1.
            return function from(arrayLike/*, mapFn, thisArg */) {
                // 1. Let C be the this value.
                var C = this;

                // 2. Let items be ToObject(arrayLike).
                var items = Object(arrayLike);

                // 3. ReturnIfAbrupt(items).
                if (arrayLike == null) {
                    throw new TypeError('Array.from requires an array-like object - not null or undefined');
                }

                // 4. If mapfn is undefined, then let mapping be false.
                var mapFn = arguments.length > 1 ? arguments[1] : void undefined;
                var T;
                if (typeof mapFn !== 'undefined') {
                    // 5. else
                    // 5. a If IsCallable(mapfn) is false, throw a TypeError exception.
                    if (!isCallable(mapFn)) {
                        throw new TypeError('Array.from: when provided, the second argument must be a function');
                    }

                    // 5. b. If thisArg was supplied, let T be thisArg; else let T be undefined.
                    if (arguments.length > 2) {
                        T = arguments[2];
                    }
                }

                // 10. Let lenValue be Get(items, "length").
                // 11. Let len be ToLength(lenValue).
                var len = toLength(items.length);

                // 13. If IsConstructor(C) is true, then
                // 13. a. Let A be the result of calling the [[Construct]] internal method 
                // of C with an argument list containing the single item len.
                // 14. a. Else, Let A be ArrayCreate(len).
                var A = isCallable(C) ? Object(new C(len)) : new Array(len);

                // 16. Let k be 0.
                var k = 0;
                // 17. Repeat, while k < len… (also steps a - h)
                var kValue;
                while (k < len) {
                    kValue = items[k];
                    if (mapFn) {
                        A[k] = typeof T === 'undefined' ? mapFn(kValue, k) : mapFn.call(T, kValue, k);
                    } else {
                        A[k] = kValue;
                    }
                    k += 1;
                }
                // 18. Let putStatus be Put(A, "length", len, true).
                A.length = len;
                // 20. Return A.
                return A;
            };
        }());
    }

您可以检查 whole sample code .我这边的结果是这样的。