[Closed] Image not loading until you hover with you mouse

[Author]

Posts

[jorgeF-2]

I am trying to: View the normal page

Link to a page where the issue can be seen: hidden link or click any boat anywhere for example hidden link

I expected to see: The load image of the boat

Instead, I got: white image only show when you hover with the mouse

[Christian Cox]

Hello, I see a few problems in the JavaScript console that may or may not be related to the issue here.

jquery.lazyloadxt.extend.js?ver=2.4.3:20 Uncaught TypeError: jQuery(...).ajaxComplete is not a function
    at jquery.lazyloadxt.extend.js?ver=2.4.3:20

jquery-3.5.1.slim.min.js:2 Uncaught Error: Syntax error, unrecognized expression: unsupported pseudo: animated

From what I understand about the "slim" jQuery build, AJAX and animation effects are not included:
https://wordpress.org/support/topic/slim-min-js-vs-min-js/

This could be part of the reason the image does not display correctly. I'm not sure why the slim build of jQuery is loaded on your site instead of the standard full jQuery release, but it could be because of a theme or other plugin, or some optimization scripts. If you're not sure about it, I'd like to try some troubleshooting steps to see if we can figure it out. Please try these tests and let me know the result:
- Temporarily activate a default theme like Twenty Twenty One
- Temporarily deactivate all plugins except Toolset Blocks (and Toolset Types, if your site uses Types) and Elementor
- Reload and retest the page.
- If the problem is resolved, reactivate the parent theme, then child theme, then other plugins, one by one, testing each time until the problem returns.
- If the problem is not resolved, I may need to take a closer look.

[jorgeF-2]

Hi Christian

thanks for the reply and help, we tried all the options but still not working.

Cheers

[Christian Cox]

Okay I'll be able to take a closer look if you provide login credentials in the private reply fields here.

[Christian Cox]

Okay thanks, I'm running some tests now and will give you an update shortly.

[Christian Cox]

Okay I see why the jQuery slim library is loaded - it's included as a script tag in your Content Template here:
hidden link
Screenshots attached.

It's not a good idea to add jQuery, Bootstrap, CSS code or JavaScript code like this directly in your Content Template. Stylesheet and script tags added manually like this bypass WordPress's perferred method for enqueueing stylesheets and scripts, which can lead to conflicts like this where other themes or plugins load duplicate resources. Toolset loads jQuery by default, and can also enqueue Bootstrap for you automatically, there's a setting in Toolset > Settings > General that will enqueue that library correctly. My suggestion is to remove the Bootstrap and JQuery scripts and stylesheets from your Content Template and use the Toolset settings to enqueue Bootstrap. jQuery is loaded by default anyway so you shouldn't need to do anything to access the jQuery object in the 'jQuery' namespace. I also suggest removing CSS code and JavaScript code from the body of the Content Template, and placing them instead in their respective editor panels.