AJAX加载的图像无法在Safari中正确显示 [英] AJAX loaded images not displaying properly in Safari

问题描述

因此，我正在使用AJAX从每个页面加载内容并将其注入当前页面.一切都可以在Chrome，Firefox，Internet Explorer(一切都可以哈哈)上运行良好，除了两个有趣的部分之外，内容在Safari上也可以正常加载.

So I'm using AJAX to load the content from each page and inject it into the current page. Everything is working great on Chrome, Firefox, Internet Explorer (as much as it can haha), and the content loads fine on Safari, aside from two curious parts.

1. 通过AJAX加载的图像的高度为0
2. 通过AJAX加载的图像丢失了对象适合属性.

---

问题1:图片高度0

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

如果您在Safari中打开页面，则所有内容都应显示良好，但是现在，如果单击关于"链接以使用AJAX加载重新加载页面，则页面上的图像将损坏.

If you open the page up in Safari everything should be displaying great, but now if you click the About link to reload the page using AJAX loading, the images on the page will break.

我正在发现的是，当AJAX加载图像高度时，图像高度已设置为0.

这是页面上的图片被AJAX加载后损坏的示例

Here is an example of an image on the page that gets broken after being loaded by 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加载内容时，页面的高度不能正确显示吗?

Why is it that the page will render properly if it is an initially loaded page (or a hard refresh), but when the content is loaded by AJAX it doesn't apply the height properly?

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

I'll be using this page for reference: http://insight.insightcreative.info/work

如果您在Safari中打开页面，那么一切应该都显示良好，但是现在，如果您单击工作"链接以使用AJAX加载重新加载页面，则页面上的图像将不会显示为适合对象.

If you open the page in Safari, everything should be displaying great, but now if you click the Work link to reload the page using AJAX loading, the images on the page will not display with object-fit.

如果检查页面，您会发现所有相同的CSS设置都应用于图像，包括object-fit属性，但是由于某些原因，它们不再尊重其属性.相反，图像会拉伸以填充容器.

If you inspect the page, you'll find all the same CSS settings are being applied to the images, including the object-fit property, but for some reason they no longer are respecting their properties. Instead the images are stretching to fill the container.

如果页面是初始加载的页面(或硬刷新)，为什么页面会正确呈现，但是当内容由AJAX加载时，它不再遵循object-fit属性了?

Why is it that the page will render properly if it is an initially loaded page (or a hard refresh), but when the content is loaded by AJAX it doesn't adhere to the object-fit property anymore?

这两个问题似乎仅在Safari中发生，我猜测这与Safari通过AJAX加载时处理图像属性的方式有关.

Both of these issues only seem to be occuring in Safari, and I'm guessing it has something to do with the way Safari handles the image properties when loaded through AJAX.

通过AJAX加载页面后，是否可以尝试强制Safari正确重新应用这些设置?还是有一个编码神知道如何使用Safari处理这些问题?

Is there a way I could try force Safari to properly re-apply these settings after the page is loaded through AJAX? Or is there a coding god out there that know's how to handle these issues with Safari?

我写了一个函数，用于在加载AJAX之后更改页面的CSS，以便它可以重写图像的属性.我特意将 object-fit 更改为 fill ，然后又恢复为 cover ，以尝试完全重置样式.

I wrote a function to change the CSS of my page after the AJAX loaded so that it would rewrite the properties for my images. I intentionally change the object-fit to fill then back to cover in an attempt to completely reset the style.

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

我确认此代码可以通过有意地更改其中的一些设置而起作用，以便它们能在浏览器中大幅度反映出来.我发现，即使在页面加载了所有内容之后更改设置，我仍然似乎无法解决该问题(关于样式).

I confirmed this code works by intentionally changing some of these settings so that they would drastically reflect in the browser. I found that even changing the settings after the page has loaded all content that I still cannot seem to fix the issue (in regards to styling).

但是，这确实使我尝试了其他尝试.通过从图像中完全删除 srcset 属性，即使在加载了AJAX的情况下，它也可以正确呈现.因此，从本质上讲，由于某种原因，通过使用 srcset ，它仅允许页面在硬加载时正确显示，而在通过AJAX加载时则无法正确显示.我不确定这是否与Safari也只会加载它在 srcset 中看到的第一张图片并忽略其余图片这一事实有关，但是我认为问题在于Safari如何正在处理 srcset .

However, this did lead me to try something else. By removing the srcset attribute completely from my image, it will then render properly even with AJAX load. So essentially, for some reason, by using srcset it only allows the page to display properly if it is hard loaded, but won't display properly if loaded by AJAX. I'm not sure if this is in correlation with the fact that Safari also will only load the first image it sees in srcset and ignores the rest, but I think the issues lies in how Safari is handling srcset.

我没有进行疯狂的详细介绍，但设法解决了该问题.在使用我自己的书面脚本加载每个页面的内容之前.测试 Barba.js 后，我发现图像在Safari上没有任何问题.因此，我加载了Barba.js，然后重新编写了所有JS，以使其在该PJAX库中正常运行.因此，以某种方式，我之前加载页面的方式导致了这个问题，但仅限于Safari.

Without going into crazy detail I managed to fix the issue. Before I was using my own written script for loading in the content of each page. After testing Barba.js I found that the images did not have any issues on Safari. So I loaded in Barba.js and then rewrote all of my JS so that it functioned correctly with that PJAX library. So somehow the way I was loading the pages before was causing this issue, but only with Safari.

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

Below is a snippet of the code I was using to load AJAX before

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

推荐答案

我也遇到了问题1中概述的Safari错误，但没有在Barba.js上重建我的应用，而是选择使用 imagesLoaded 脚本.这是我的功能，以防其他人发现它有用:

I was also experiencing the Safari bug outlined in Issue 1 but instead of rebuilding my app on Barba.js chose to rewrite the safariResize function using the imagesLoaded script. Here is my function in case someone else finds it useful:

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中正确显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！