The iOS browser fails to display the image requested via Ajax, even though it has been loaded into the DOM

Question

The iOS browser fails to display the image requested via Ajax, even though it has been loaded into the DOM

Update:

The issue with the image size does not seem to be the cause, as other photos on my website load without any problems.
Upon further investigation, I discovered that this problem only occurs when browsing on iOS. It functions properly on Android devices.

I have developed an infinite scroll plugin to fetch additional posts via REST API in Wordpress. While the plugin operates flawlessly on desktop browsers, it fails to load the images within the posts when accessed through a mobile browser (Tested on Chrome and Safari using my iPhoneX).

After debugging remotely, I identified the following issues:

The HTML tag for the image is included in the XHR response.
The element corresponding to the image exists in the DOM.
No CSS rules like display: none are preventing the image from displaying.
The image was received with a status code of 200.

What am I overlooking?

Screenshot from Safari Debugger showing the image response:

Visit my website at: survivalisthk.com (Scroll to the bottom to trigger the infinite scroll feature and witness the image loading issue)

javascript ios ajax debugging mobile

Answer 1

Answer №1

Just figured out the solution on my own. It turns out that the height of the images was being set to 0px when they were loaded. I managed to fix this issue with the code below:

const adjustImageHeight = () => {
    console.log('adjustImageHeight running');
    let images = document.getElementsByTagName('img');
    for( let i = 0; i < images.length; i++){
        images[i].addEventListener('load', function () {
            let naturalHeight = images[i].naturalHeight;
            let naturalWidth = images[i].naturalWidth;
            let newHeight = images[i].width / (naturalWidth / naturalHeight);
            console.log(newHeight);
            images[i].style.height = newHeight + 'px';
            console.log(images[i].style.height);
        });
    }
};

For more information, you can check out: AJAX loaded images not displaying properly in Safari

Answer 2

Just figured out the solution on my own. It turns out that the height of the images was being set to 0px when they were loaded. I managed to fix this issue with the code below:

const adjustImageHeight = () => {
    console.log('adjustImageHeight running');
    let images = document.getElementsByTagName('img');
    for( let i = 0; i < images.length; i++){
        images[i].addEventListener('load', function () {
            let naturalHeight = images[i].naturalHeight;
            let naturalWidth = images[i].naturalWidth;
            let newHeight = images[i].width / (naturalWidth / naturalHeight);
            console.log(newHeight);
            images[i].style.height = newHeight + 'px';
            console.log(images[i].style.height);
        });
    }
};

For more information, you can check out: AJAX loaded images not displaying properly in Safari

The iOS browser fails to display the image requested via Ajax, even though it has been loaded into the DOM

Answer №1

Similar questions

Updating a Mongoose document

What is the best way to use jQuery for uploading files and form data?

Twitter: cease monitoring stream events following X callback

Show the HTML code within the form with the identifier html-editor-form

JavaScript image sorting function fails to sort multiple ID elements that match

What are some effective ways to test asynchronous functions in React?

What is preventing me from applying a jQuery function to an ng-click event in AngularJS?

Access to XMLHttpRequest has been restricted due to CORS policy when utilizing $.ajax

Guide to configuring a robust schema and validation with joi

Focus on the iPad3 model specifically, excluding the iPad4

Troubleshooting nodes in src/http.js using node-inspector for debugging purposes

Is there anyone who can identify the issues with this form validation?

Looking for a way to retrieve Instagram data with Python using Selenium, following Instagram's recent API changes? Having trouble locating all entries, as only 12 are showing up?

Converting a jQuery $.ajax POST request to a GET request with Django

Using a regular div to display a modal - Reactstrap

Storing a URL with a hash and exclamation mark in PHP: Best practices

Retrieving User Activity Reports for a specified set of users within G Suite

Tips on integrating Codrops tutorial codes into a SilverStripe website project

Retrieve particular key from document in MongoDB based on provided value

Tips for automating the execution of Chrome extension code on pages with infinite scrolling