Javascript AJAX加载的图像在Safari中未正确显示

因此，我使用AJAX从每个页面加载内容，并将其注入当前页面。Chrome、Firefox、InternetExplorer上的一切都很好（尽可能多，哈哈），Safari上的内容加载也很好，除了两个奇怪的部分

通过AJAX加载的图像高度为0

通过AJAX加载的图像正在丢失其对象拟合属性

---

问题1：图像高度0 我将使用此页面作为参考：

如果您在Safari中打开页面，所有内容都应该显示得很好，但是现在如果您单击About链接使用AJAX加载重新加载页面，页面上的图像将中断

我发现，当AJAX加载图像时，图像高度被设置为0。

下面是一个页面上的图像示例，该图像在被AJAX加载后被破坏

<img data-aos-anchor-placement="bottom-bottom" data-aos-offset="100" src="/img/agency/clients/affinity-medical-group.jpg" alt="Affinity"
srcset="
/img/agency/clients/affinity-medical-group-2400.jpg 2400w,
/img/agency/clients/affinity-medical-group-1800.jpg 1800w,
/img/agency/clients/affinity-medical-group-1200.jpg 1200w,
/img/agency/clients/affinity-medical-group-900.jpg 900w,
/img/agency/clients/affinity-medical-group-600.jpg 600w,
/img/agency/clients/affinity-medical-group-400.jpg 400w" />

我通过故意更改其中一些设置来确认这段代码的工作原理，以便它们能够在浏览器中彻底反映出来。我发现，即使在页面加载所有内容后更改设置，我似乎仍然无法解决问题（关于样式）

然而，这确实让我尝试了其他方法通过完全从我的图像中删除

srcset

属性，即使使用AJAX加载，它也能正确渲染。因此，本质上，由于某种原因，通过使用

srcset

，它只允许页面在硬加载时正确显示，而在AJAX加载时不会正确显示。我不确定这是否与Safari只加载它在

srcset

中看到的第一个图像，而忽略其余的图像相关，但我认为问题在于Safari如何处理

srcset

解决方案：Barba.js 我没有进入疯狂的细节，而是设法解决了这个问题。在我使用自己编写的脚本加载每个页面的内容之前。经过测试，我发现这些图像在Safari上没有任何问题。所以我加载了Barba.js，然后重写了我所有的js，这样它就可以在PJAX库中正常运行。因此，我以前加载页面的方式导致了这个问题，但这只是Safari的问题

下面是我以前用来加载AJAX的代码片段

//Function that loads in the new content
var load = function(url) {

//Fadeout leaving page transition
$('#content').velocity("fadeOut", {
  visibility: 'visible',
  display: 'block',
  complete: function() {

    //Load new content
    $("#content").load(url + " #content");

  }
});

};

//Action to perform on link click
$(document).on('click', 'a', function(e) {

//Sets variables to be used for url and page name
var $this = $(this),
  url = $this.attr("href"),
  title = $this.text();
loading = true;

//Makes entries into browser history
if (url.indexOf(document.domain) > -1 || url.indexOf(':') === -1) {
  history.pushState({
    url: url + '/',
    title: title
  }, title, url);
  $('#container').mixItUp('destroy');
  $('a').on('click.myDisable', function() {
    return false;
  });
  load(url);
  if (url === '/') {
    document.title = "Insight Creative, Inc.";
  } else {
    document.title = title + " - Insight Creative, Inc.";
  }

  return false;
}
});

---

在你的图像css上检查以下内容

• 显示：通常设置为块
• 位置：如果最初未加载，可能需要设置为“固定”
• 最大宽度：检查是否已更改
• 最大高度：检查是否已更改

---

您可能会假设应用于组件的css规则保持初始加载时的状态，但在ajax完成加载后，您可能需要重新应用其中的一些规则，特别是如果您运行了一些javascript来管理这些规则。某些浏览器可能能够应用它们。我需要在网上找到这篇文章，但现在如果你能查看上面的内容，但它并不能解决你的问题，请在这里告诉我。要隔离img问题，您可以创建一个带有单个图像的测试页面，共享一个链接，并从该页面中删除尽可能多的其他项目。可能只是基本的页眉和页脚来隔离其他问题。

因此我设法解决了两个问题中较大的一个，即由于高度为0，图像无法显示。出于某种原因，在通过AJAX Safari加载带有

srcset

的图像时，删除了自动高度并使其为0px

我编写了一个函数，等待所有图像加载（因为否则，

naturalHeight

返回0），然后将高度更改为保留原始图像相同纵横比的高度。我还制作了它，这样它只针对那些没有应用

对象匹配：cover

的图像，因为这些图像给我带来了问题，否则它会把

对象匹配

图像搞砸

function safariResize() {
  console.log("Running safariResize");

  // This variable starts at 1 because the logo (always on the page) is image 0
  var loaded = 1;
  $('img').on('load',function(){
    loaded++;
    images = $('img');
    if (loaded == $('img').length){
      for (var i = 1; i < images.length; i++){
        if ($(images[i]).css("object-fit") != 'cover'){
          var naturalH = images[i].naturalHeight;
          var naturalW = images[i].naturalWidth;
          var ratio = naturalH / naturalW;
          var newRatio = (images[i].width / naturalW);
          var newH = naturalH * newRatio;
          $(images[i]).css("height", newH + "px");
        }
      }
    }

  });
}

---

我不相信我能解决对象适配问题，这只发生在桌面版Safari上（在iPad上运行良好）。如果你能找到一个更简单的方法来解决这个问题，请告诉我，因为这对我来说是一个很难解决的过程。

我也遇到了问题1中概述的Safari bug，但我没有在Barba.js上重建我的应用程序，而是选择使用脚本重写safariResize函数。以下是我的功能，以防其他人发现它有用：

var safariResize = function() {
    // Targetting collapsed images in pjax loading box (safari bug)
    var imgLoad = imagesLoaded( $('.site-container > .site-inner img') );
    imgLoad.on( 'progress', function( instance, image ) {
        if(image.isLoaded && image.img.height == 0){
            var naturalH = image.img.naturalHeight,
            naturalW = image.img.naturalWidth;
            if( image.img.parentElement.clientWidth < naturalW ){
                var ratio = naturalH / naturalW;
                naturalW = image.img.parentElement.clientWidth;
                naturalH = naturalW * ratio;
            }
            image.img.setAttribute("style","width: "+naturalW+"px; height: "+naturalH+"px;");
        }
    });
};

var safariResize=function（）{
//针对pjax加载框中折叠的图像（safari bug）
var imgLoad=imagesLoaded（$（'.site container>.site internal img'）；
imgLoad.on（'progress'，函数（实例，图像）{
if（image.isLoaded&&image.img.height==0）{
var naturalH=image.img.naturalhight，
自然宽度=image.img.naturalWidth；
if（image.img.parentElement.clientWidth

我在问题中添加了一个编辑1，其中我解释了我是如何尝试在AJAX加载后使用更新图像样式的方法来解决问题的。我遇到了完全相同的问题，并且一直通过设置高度来解决问题，类似于泰勒的回答。老实说，我认为这是一个非常糟糕的错误，应该引起Safari的注意。

if (navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1)  {
  safariResize();
} else if (navigator.userAgent.indexOf('iPad') != -1 && navigator.userAgent.indexOf('Chrome') == -1) {
  safariResize();
}

var safariResize = function() {
    // Targetting collapsed images in pjax loading box (safari bug)
    var imgLoad = imagesLoaded( $('.site-container > .site-inner img') );
    imgLoad.on( 'progress', function( instance, image ) {
        if(image.isLoaded && image.img.height == 0){
            var naturalH = image.img.naturalHeight,
            naturalW = image.img.naturalWidth;
            if( image.img.parentElement.clientWidth < naturalW ){
                var ratio = naturalH / naturalW;
                naturalW = image.img.parentElement.clientWidth;
                naturalH = naturalW * ratio;
            }
            image.img.setAttribute("style","width: "+naturalW+"px; height: "+naturalH+"px;");
        }
    });
};