$fotorama not loading consistantly

Question

I know this has been asked before, but I haven't been able to find a solution. I'm using the latest version of Magento 2 with the Porto theme. Occasionally things will load ok (especially in Firefox), but $fotorama doesn't load consistently, and as a result, images don't look right.

What I've tried:

• disabling lazyload for product images
• disabling the old media gallery
• running the resize command for all images
• removing gallery from my attribute sets and only leaving image_gallery
• Clearing all caches (server and browser)
• reindexing
• calling the fotorama library in requirejs-config.js like this

var config = {
    paths: {
        'fotorama/fotorama': 'fotorama/fotorama',
    },
    shim: {
        'fotorama/fotorama': {
            deps: ['jquery']
        },
    }
}

Answer 1

I had an external script that was causing this. I'm still not sure why, but in my case it was a script from Constant Contact (yours may be different).

Instead of including it in the header scripts, I moved it into a block (not sure if that did anything) and then I added an async tag to that script. That seems to have done it.

To troubleshoot, remove all of your third party scripts and see if that makes $fotorama run consistently. If it does, add the scripts back slowly until you figure out which one is breaking $fotorama.

Add an async tag to that script, and it should work.

Example

<script async> var _ctct_m = "<my cc id>"; </script>

Answer 2

I had no error message and the only way I tracked it down was disabling modules.

Answer 3

I faced this problem for more than two or three months, I tried with everything. Now I upgraded my Magento version from 2.4.5 to 2.4.6 and the issue with fotorama is resolved.

Try with upgrading your Magento version this will resolve the issue. This maybe happening because of glitch in Magento compatibility.