jQuery .appendTo() [IE] - Images do not render unless I resize the browser window

Question

I am using the jQuery functions .render() and .appendTo to render images and text on a page, specifically into a placeholder/template. It works well in Firefox and Chrome. But, in IE, the images do not render automatically. The word 'image' appears instead. If I resize the browser window (maximize, resize, or open/close Dev Tools) the images show up.

I came across this thread, because initially I only thought it happened on opening Dev Tools, but I did not find anything useful. My JS does not use any console calls, and I tried using cache: false in my ajax calls, but that did not work.

The template markup that the JS is targeting:

@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>
}

The 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');
            }
        });
    }
});
});

What could be causing IE to not render the images automatically?

Paul · Accepted Answer · 2016-04-07T21:10:30.180

I was able to fix this by removing the retina specifications (more information on retina here) from the srcset tag of each image and using src instead. If you look at the first img tag in the HTML, it has a 1x, then 2x - that is retina. By removing 1x and everything after it, and using src instead of srcset, I have no problem rendering new images in IE. Example of working markup:

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

Taken from my link - IE does not support srcset, and because I did not have src in my markup originally, IE did not like it:

Browsers that don’t support srcset will fall back to the file specified in src, absent a polyfill.

For more information on srcset support across browsers, check out this helpful page.

jQuery .appendTo() [IE] - Images do not render unless I resize the browser window

1 Answers1