javascript - 小幅修改后 setAttribute 在 IE10 上竟不能正常工作

Question

背景介绍：项目中使用一个JS库来实现图片预览功能，之前一切正常，后为了解决一些样式问题，事先把页面中的图片隐藏，待图片全部加载完后再显示出来，（JS中新添加的唯一一行代码下方有标注），发现在 IE10 上 setAttribute 不生效，每张 img 并没有如预期那样被设置了data-size属性，十分困惑不解，望赐教

function initImgGallery() {
    var $imgListBox = $('.ppt-gallery');
    var $imagesArr = $imgListBox.find('img');
    var count = $imagesArr.length;
    $imagesArr.load(function() {
        count--;
        if (!count) {
            for (var i = 0; i < $imagesArr.length; i++) {
                var naturalWidth =  $imagesArr[i].naturalWidth;
                var naturalHeight = $imagesArr[i].naturalHeight;
                $imgListBox.find('img').eq(i)[0].setAttribute('data-size', naturalWidth + 'x' + naturalHeight);
            }
            if (isIE) {
                $('.ppt-gallery').find('img').each(function () {
                    var maxWidth = $('.lesson-detail-container').width();
                    $(this).css({
                        'width': maxWidth,
                        'display': 'inline' // 新加的
                    });
                });
            }
            initPhotoSwipe('.ppt-gallery');
        }
    }).filter(function() { return this.complete; }).load();
}

Answer 1

IE10上测试了，setAttribute是有用的

**Q：什么情况会失效？
A：当setAttribute的值不合法时，设置的属性不会出现，也就是说下面这句中**：

setAttribute('data-size', naturalWidth + 'x' + naturalHeight)

naturalWidth + 'x' + naturalHeight这个值不合法时