jQuery .appendTo（）[IE]-除非我調整瀏覽器窗口的大小，否則圖像不會渲染

Question

我正在使用jQuery函數.appendTo .render()和.appendTo來渲染頁面上的圖像和文本，特別是渲染到占位符/模板中。 它在Firefox和Chrome中運行良好。 但是，在IE中，圖像不會自動呈現。 而是出現“圖像”一詞。 如果我調整瀏覽器窗口的大小（最大化，調整大小或打開/關閉Dev Tools），則會顯示圖像。

我碰到了這個線程 ，因為起初我只是以為它是在打開Dev Tools時發生的，但是我沒有發現任何有用的東西。 我的JS不使用任何控制台調用，我嘗試使用cache：在我的ajax調用中為false，但這沒有用。

JS定位的模板標記：

@using (Html.BeginBeforeBodyClosePlaceHolder())
{
    <script id="gridItemTemplate" type="text/html">
        <div class="content-block__one-third">
            <div class="add-display-block centered-text add-top-margin add-bottom-margin">
                <a href="${ItemUrl}" class="link-undressed">
                    <picture>
                        <img class="flex" srcset="${ThumbnailPhotoUrl}?quality=80&width=500&mode=crop&format=jpg 1x, ${ThumbnailPhotoUrl}?quality=80&width=500&mode=crop&format=jpg 2x" alt="image"/>
                    </picture>
                </a>
                <a href="${ItemUrl}" class="link-undressed">
                    <h3 class="uppercase no-bottom-margin">${ThumbnailItemTitle}</h3>
                </a>
                {{if $(ThumbnailItemDescription) != null && $(ThumbnailItemDescription) != ""}}
                    <p class="no-top-padding no-top-margin sm-text">${ThumbnailItemDescription}</p>
                {{/if}}
                {{if $(ThumbnailItemDate) != null && $(ThumbnailItemDate) != ""}}
                    <p class="no-top-padding no-top-margin sm-text">${ThumbnailItemDate}</p>
                {{/if}}
            </div>
        </div>
    </script>
}

JS：

$(function () {
   $('#btnSeeMore').click(function (e) {
    var lastContentBlock = $('#subItemGrid').children('div.content-block__one-third').last();
    var gridItemId = lastContentBlock.siblings('input#GridItemId').last().val();

    // Get the number of content blocks currently within the subItemGrid
    var gridItemCount = $('#subItemGrid').children('div.content-block__one-third').length;

    var anchor = lastContentBlock.find('a');
    if (anchor != null && anchor.length > 0) {
        var ahref = anchor.attr('href');
        var slashIndex = ahref.lastIndexOf('/');
        var itemName = ahref.substring(slashIndex + 1);
        var itemType = "";

        if (ahref.indexOf('recipe') > 0) {
            itemType = "Recipe";
        } else if (ahref.indexOf('news') > 0) {
            itemType = "News Article";
        } else if (ahref.indexOf('event') > 0) {
            itemType = "Event";
        }

        $.get('/api/WFBC/GetNextContentItems', { itemType: itemType, lastItemName: itemName }, function (data) {
            if (data.success) {
                // Slide the See More button down
                $('#gridItemTemplate').render(data.nextItems).appendTo('div.content-block');
                if (data.endOfItems) {
                    // Disable the See More button
                    $('#btnSeeMore').attr('disabled', 'disabled');
                }
            } else {
                // Disable the See More button
                $('#btnSeeMore').attr('disabled', 'disabled');
            }
        });
    } else {
        var itemGuid = $('#ItemGuid').val();
        $.get('/api/WFBC/GetNextGridItems', { gridItemId: gridItemId, gridItemCount: gridItemCount, pageItemGuid: itemGuid }, function (data) {
            if (data.success) {
                // Slide the See More button down
                $('#gridItemTemplate').render(data.nextItems).appendTo('div#subItemGrid');
                if (data.endOfItems) {
                    // Disable the See More button
                    $('#btnSeeMore').attr('disabled', 'disabled');
                }
            } else {
                // Disable the See More button
                $('#btnSeeMore').attr('disabled', 'disabled');
            }
        });
    }
});
});

是什么原因導致IE無法自動呈現圖像？

Answer 1

我能夠通過從每個圖像的srcset標簽中刪除視網膜規范（ 此處有關視網膜的更多信息）並改為使用src來解決此問題。 如果您查看HTML中的第一個img標簽，則其標記為1x ，然后為2x即視網膜。 通過刪除1x及其之后的所有內容，並使用src而不是srcset ，我在IE中呈現新圖像沒有問題。 工作標記示例：

<img class="flex" src="${ThumbnailPhotoUrl}?quality=80&width=500&mode=crop&format=jpg" alt="image"/>

從我的鏈接中srcset不支持srcset ，並且由於我本來在標記中沒有src ，所以IE不喜歡它：

不支持srcset的瀏覽器將退回到src中指定的文件，而沒有polyfill。

有關跨瀏覽器支持srcset更多信息，請查看此幫助頁面。