jQuery .appendTo() [IE] - Tarayıcı penceresini yeniden boyutlandırmadığım sürece görüntüler gösterilmiyor

Question

Bir sayfadaki görüntüleri ve metni özellikle bir yer tutucuya/şablona dönüştürmek için jQuery işlevlerini .render() ve .appendTo kullanıyorum. Firefox ve Chrome'da iyi çalışıyor. Ancak, IE'de, görüntüler otomatik olarak oluşturulmaz. Bunun yerine 'image' kelimesi görünür. Tarayıcı penceresini yeniden boyutlandırırsam (Dev Araçları'nı büyüt, yeniden boyutlandır veya aç/kapa) görüntüler görüntülenir.

this thread ile karşılaştım, çünkü başlangıçta yalnızca Dev Tools'un açılışında olduğunu düşündüm, ancak yararlı bir şey bulamadım. JS'm hiçbir konsol çağrısını kullanmıyor ve önbellek kullanmayı denedim: ajax çağrılarımda yanlış, ancak bu çalışmadı.

şablon biçimlendirme JS hedeflediğini:

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

otomatik görüntüleri oluşturmaması için IE neden olabilecek ne

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

?

Answer 1

Bunu düzeltmek için retina belirtimlerini (daha fazla bilgi için retina here) her görüntüden srcset etiketini kaldırarak ve src kullanarak düzeltmeyi başardık. HTML'de ilk img etiketine bakarsanız, 1x, daha sonra 2x - bu retinadır. 1x ve her şeyden sonra, srcset yerine src kullanarak, IE'de yeni görüntüler oluştururken sorun yaşamadım. çalışma işaretleme örneği: benim bağlantıdan

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

Taken - IE srcset desteklemez ve Başlangıçta benim işaretlemesinde src yoktu çünkü, IE beğenmedim:

Tarayıcılar srcset'i desteklemeyen, src'de belirtilen dosyasına bir polifillen geri dönecek.

tarayıcılar arasında srcset desteğine ilişkin daha fazla bilgi için, this faydalı sayfasını kontrol.