Question

我使用jQuery函数.render()和.appendTo在页面上呈现图像和文本，特别是在占位符/模板中。它适用于Firefox和Chrome。但是，在IE中，图像不会自动渲染。而是出现“图像”这个词。如果我调整浏览器窗口的大小（最大化，调整大小或打开/关闭Dev Tools），图像就会显示出来。

我遇到this thread，因为最初我只是认为它发生在开启Dev Tools上，但我没有找到任何有用的东西。我的JS不使用任何控制台调用，我尝试在我的ajax调用中使用cache：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标记移除视网膜规格（有关视网膜here的更多信息）并使用src来解决此问题。如果您查看HTML中的第一个img标记，则会显示1x，然后是2x - 即视网膜。通过删除1x及其后的所有内容，并使用src代替srcset，我在IE中呈现新图像没有问题。工作标记示例：

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

取自我的链接 - IE不支持srcset，因为我的标记最初没有src，IE不喜欢它：

不支持srcset的浏览器将回退到该文件在src中指定，没有polyfill。

有关跨浏览器的srcset支持的详细信息，请查看this有用的页面。

jQuery .appendTo（）[IE] - 除非我调整浏览器窗口的大小

1 个答案: