Images are not loaded on tabs

Created on 5 November 2023, 8 months ago
Updated 22 November 2023, 7 months ago

Problem/Motivation

First of thing, Thank you for the great module.
I have an image inside the tab as an example the image is not loaded until the user scrolls based on the Event Listener

Steps to reproduce

Create tabs and add an image field

Proposed resolution

Remaining tasks

User interface changes

API changes

Data model changes

πŸ› Bug report
Status

Closed: outdated

Version

2.2

Component

Code

Created by

πŸ‡―πŸ‡΄Jordan Ahmad Abbad Jordan

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

Comments & Activities

  • Issue created by @Ahmad Abbad
  • πŸ‡§πŸ‡ͺBelgium weseze

    Images are only loaded on page load and on scrolling. Any other system (like tabs) needs to implement a drimage delay class and JS init function to make it work.
    The documenation for this can be found on the project homepage ( https://www.drupal.org/project/drimage/ β†’ ) or in the READMe file in the drimage module.
    Bascially you need to add a delay class, remove it when the tab opens and then call drimage init function on the content of the tab.

    tabElement.classList.remove('js-delay-drimage');
    Drupal.drimage.init(tabElement);
    

    What system for "tabs" are you using?

  • πŸ‡―πŸ‡΄Jordan Ahmad Abbad Jordan

    Thank you @weseze
    I'm using Boostrap tabs
    I'm trying to implement it using JS but I'm getting this error
    drimage.js?s3p93u:145 Uncaught TypeError: context.querySelectorAll is not a function
    any advice?

  • πŸ‡§πŸ‡ͺBelgium weseze

    You would have to share your code for me te provide feedback on this...
    My first guess is that you are passing an empty variable to Drupal.drimage.init(yourVariable).

  • Status changed to Closed: outdated 7 months ago
  • πŸ‡§πŸ‡ͺBelgium weseze

    Closing because there is no more feedback. I'm assuming you resolved the issue. Feel free to reopen if there is more feedback.

Production build 0.69.0 2024