图库灯箱仅在 IE11 中首次单击时不插入图像

Posted 2023-05-08

【中文标题】图库灯箱仅在 IE11 中首次单击时不插入图像

【英文标题】：Gallery lightbox not inserting image on first click in IE11 only

【发布时间】：2019-12-26 15:03:12

【问题描述】：

我的图库在除 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" >
      </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" >
      </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" >
      </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" >
      </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" >
      </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" >
      </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" >
      </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" >
      </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" >
      </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" >
      </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" >
      </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" >
      </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。

【参考方案1】：

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

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

添加以下polyfills后，代码在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。我这边的结果是这样的。