Question

所以我使用AJAX从每个页面加载内容并将其注入当前页面。一切都在Chrome，Firefox，Internet Explorer上运行得很好（尽管它可以哈哈），除了两个奇怪的部分外，内容在Safari上运行良好。

通过AJAX加载的图片的高度为0
通过AJAX加载的图片正在失去对象适合的属性。

问题1：图像高度0

我将使用此页面作为参考：http://insight.insightcreative.info/about

如果你在Safari中打开页面，一切都应该显示得很好，但现在如果你点击关于链接使用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" />

如果页面是最初加载的页面（或硬刷新），为什么页面会正确呈现，但是当内容由AJAX加载时，它不能正确应用高度？

问题2：对象不适用

我将使用此页面作为参考：http://insight.insightcreative.info/work

如果你在Safari中打开页面，一切都应该显示得很好，但现在如果你单击工作链接使用AJAX加载重新加载页面，页面上的图像将不会显示为对象适合。

如果您检查页面，您将发现所有相同的CSS设置都应用于图像，包括对象适合属性，但由于某种原因，他们不再尊重其属性。而是图像伸展以填充容器。

如果页面是最初加载的页面（或硬刷新），为什么页面会正确呈现，但是当内容由AJAX加载时，它不再符合对象适应属性？< / p>

这两个问题似乎只在Safari中出现，而且我猜测它与Safari在通过AJAX加载时处理图像属性的方式有关。

有没有办法在通过AJAX加载页面后，我可以尝试强制Safari正确地重新应用这些设置？或者是否有编码神知道如何使用Safari处理这些问题？

编辑1：

我在加载AJAX后编写了一个更改页面CSS的函数，以便重写我的图像的属性。我故意将object-fit更改为fill，然后再更改为cover，以尝试完全重置样式。

function checkImages() {
  var images = $('img');
  for (var i = 0; i <= images.length; i++){
    var result = $(images[i]).css("object-fit");
    if (result == 'cover'){
      $(images[i]).css("object-fit","fill");
      $(images[i]).css("object-fit","cover");
      $(images[i]).css("display","block");
      $(images[i]).css("position","relative");
      $(images[i]).css("max-width","100%");
      $(images[i]).css("max-height","100%");
    }
  }
}

我确认此代码的工作原理是故意更改其中一些设置，以便它们能够在浏览器中大幅反映。我发现即使在页面加载了所有内容之后仍然无法更改设置，我仍然无法解决问题（关于样式）。

但是，这确实让我尝试了别的东西。 通过从我的图片中完全删除srcset属性，即使使用AJAX加载，它也会正确呈现。基本上，出于某种原因，通过使用srcset它只允许页面在硬盘加载时正确显示，但如果由AJAX加载则不能正确显示。我不确定这是否与Safari同样只会加载它在srcset中看到的第一张图片并忽略其余部分的事实相关，但我认为问题在于Safari是如何处理srcset 。

解决方案：Barba.js

没有疯狂的细节，我设法解决了这个问题。在我使用自己的书面脚本加载每个页面的内容之前。经过测试Barba.js后，我发现这些图片在Safari上没有任何问题。所以我加载了Barba.js然后重写了我的所有JS，以便它能够正确地运行该PJAX库。所以我以前加载页面的方式导致了这个问题，但仅限于Safari。

下面是我在

//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;
}
});

Answer 1

检查你的图像css

显示：通常设置为阻止
位置：如果最初没有加载，可能需要设置为固定
max-width：检查是否更改
max-height：检查是否已更改

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

Answer 2

所以我设法解决了两个问题中较大的问题，即由于0高度而未显示的图像。出于某种原因，当通过AJAX Safari加载带srcset的图像时，删除自动高度并使其为0px。

我编写了一个等待所有图像都加载的函数（因为否则naturalHeight返回0）然后它将高度更改为保持原始图像的相同宽高比的高度。我也做了它，它只针对没有object-fit: cover应用于它们的图像，因为这些是给我带来问题的图像，否则它会弄乱object-fit图像。

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");
        }
      }
    }

  });
}

然后我在if语句中加载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();
}

我不相信我能够解决对象问题，这只发生在桌面版Safari上（在iPad上运行正常）。如果您找到一种更简单的方法来解决此问题，请告诉我，因为这是我修复的过程。

Answer 3

我也遇到了问题1中概述的Safari错误，但我没有在Barba.js上重建我的应用程序，而是选择使用imagesLoaded脚本重写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;");
        }
    });
};

AJAX加载的图片在Safari

问题1：图像高度0

问题2：对象不适用

编辑1：

解决方案：Barba.js

3 个答案: