In some cases, the data-loaded attribute may fail to be set when the correct image is already loaded. This issue is further compounded by the assumption in the JavaScript code that the data-multiplier attribute exists, which leads to console errors.
The issue with data-loaded attribute not getting set
Create a 16:9 aspect ratio image.
Override the media template using the following code:
{{ attach_library('easy_responsive_images/resizer') }}
{% set file = media.field_media_image.entity %}
{% if not file.uri.isEmpty() %}
{% set src = file.uri.value|image_url('responsive_16_9_350w') %}
{% set srcset = [
file.uri.value|image_url('responsive_16_9_150w')['#markup'] ~ ' 200w',
file.uri.value|image_url('responsive_16_9_350w')['#markup'] ~ ' 300w',
file.uri.value|image_url('responsive_16_9_350w')['#markup'] ~ ' 350w',
file.uri.value|image_url('responsive_16_9_550w')['#markup'] ~ ' 550w',
file.uri.value|image_url('responsive_16_9_950w')['#markup'] ~ ' 950w',
file.uri.value|image_url('responsive_16_9_1250w')['#markup'] ~ ' 1250w',
file.uri.value|image_url('responsive_16_9_1450w')['#markup'] ~ ' 1450w',
] %}
<img
class="lazy-load-image"
src="{{ src }}"
data-srcset="{{ srcset|join(',') }}"
alt="{{ media.field_media_image.alt }}"
loading="lazy"
/>
{% else %}
<img
src="{{ media.field_media_image | file_url }}"
alt="{{ media.field_media_image.alt }}"
loading="lazy"
/>
{% endif %}
On a desktop, create an image that is 300 pixels wide or less. Observe that the data-loaded attribute is never set to "true."
Issue with data-multiplier attribute
Using the same code as above for data-multiplier will result in console errors because the data-multiplier attribute does not exist.
Fixed
1.3
Code
Thanks, sorry I missed that. Committed with a minor change.
Issue #3396999 by AndySipple, seanB: data-loaded attribute is sometimes...
Automatically closed - issue fixed for 2 weeks with no activity.