Images lazy loaded with jQuery are rendered as binary data in devtools

Created on 7 March 2024, 4 months ago
Updated 8 March 2024, 4 months ago

Problem/Motivation

Rocketship generated theme provides extra JS library to handle image lazy loading.
This library is using jQuery .load() to reload images:
https://git.drupalcode.org/project/rocketship_theme_generator/-/blob/4.0...

When original image is additionally loaded we can observe extra XHR requests in the browser and if we preview the page source in dev tools, we can see that <img> tag is filled with binary data of the image.
This could be because jQuery .load() function fetches the data "as is"
https://api.jquery.com/load/
and if we request Drupal image the response provides binary representation of that image

Steps to reproduce

Open a page with rendered image fields and observe network tab in Chrome, for a single image there will be additional XHR requests

Those extra requests are triggered by $(img).load(img.src);
Then preview the image element and see that it renders binary data:

Also the request headers are different, for example:
For original request:

Accept:
image/avif,image/webp,image/apng,image/svg+xml,image/*,*/*;q=0.8

XHR/jQuery request:

Accept:
text/html, */*; q=0.01

Proposed resolution

Figure out why those images are suddenly rendered as binary data.
Find a way to change that code so it loads images without changing the final HTML markup of images.

Remaining tasks

Look for a way to change $(img).load(img.src); into something that loads images properly.

User interface changes

N/A

API changes

N/A

Data model changes

N/A

πŸ› Bug report
Status

Active

Version

4.0

Component

Code

Created by

πŸ‡΅πŸ‡±Poland sandboxpl Poland πŸ‡΅πŸ‡±

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

  • Issue created by @sandboxpl
  • πŸ‡΅πŸ‡±Poland sandboxpl Poland πŸ‡΅πŸ‡±
  • πŸ‡§πŸ‡ͺBelgium rembrandx

    A bit of context about that image JS: some of what it tries to accomplish, is detect when an image is loaded, so it can unset some css used to display a preloader while images are loaded. But also to fix lazy loading images that don’t want to load. I seem to recall cached images not doing what they are supposed to do, for example.
    That first thing is not needed to have a functional site, that second thing might not be relevant anymore depending on how lazy loading is implemented in browsers these days, how it works with other image libraries from the modules, …

    The logic to detect loaded images, is old and what was available at the time. So could be there’s better ways now to check image being loaded. Or might not be needed anymore at all (just check stuff works when reloading pages please).

  • First commit to issue fork.
Production build 0.69.0 2024