$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>