Broken image displays before actual image

[lesliekirk]

This is the strangest thing (and I may have brought this up before). When you go to the product page here, you first see a broken image in Chrome before the actual images display. How do I stop this behavior?

[Matt Zimmermann]

Hi Leslie,

Do you have the source value of the image tag set to "graphics/en-US/cssui/blank.gif"?

[lesliekirk]

Hi Leslie,

Do you have the source value of the image tag set to "graphics/en-US/cssui/blank.gif"?

No, this is what is there

<img id="main_image" class="x-product-layout-images__image" data-hook="product-image" data-index="0" data-mini-modal data-mini-modal-content="data-hook=photo-gallery-template" data-mini-modal-type="inline" src="&mvt:product:image;" alt="&mvte:product:name;" title="&mvte:product:name;">

[Matt Zimmermann]

Hi Leslie,

Unless the site is using the legacy product image, that will break. I would recommend switching it to the source I mentioned.

[lesliekirk]

Hi Leslie,

Unless the site is using the legacy product image, that will break. I would recommend switching it to the source I mentioned.

Break as in never show an image? Or break as in the behavior I described / displayed?

Would this then be the correct code?

<img id="main_image" class="x-product-layout-images__image" data-hook="product-image" data-index="0" data-mini-modal data-mini-modal-content="data-hook=photo-gallery-template" data-mini-modal-type="inline" src="graphics/en-US/cssui/blank.gif" alt="&mvte:product:name;" title="&mvte:product:name;">

If so, there is a lag before the image loads but no broken image temporarily being displayed.

[Matt Zimmermann]

Hi Leslie,

Break as in what you are seeing. If you inspect the element, on load you will see that the source of the image is "unknown" and then it adds the correct source. In the case of using the blank GIF, that is the default that Miva has used for a long time so you should see no error on it.

[lesliekirk]

I'm still baffled as to why there is this lag in loading which includes a flash of an image before the image loads.

[Matt Zimmermann]

Hi Leslie,

I am not seeing an image flash before the page loads. Have you tested in a browser without the inspector active?

[lesliekirk]

Hi Leslie,

I am not seeing an image flash before the page loads. Have you tested in a browser without the inspector active?

It seems to only happen when there are multiple images. I have seen it here.

[Matt Zimmermann]

Hi Leslie,

That most likely comes from the initialization of the Slick plugin which is used when there are multiple images.

[Bruce - PhosphorMedia]

matt, does the theme not lazy load images? hence the reason for using a data attribute to grab the actual image?

[Matt Zimmermann]

Hey Bruce,

Not as it is currently coded. Slick has some lazy logic in it, but nothing on the main image.

[lesliekirk]

Hi Leslie,

That most likely comes from the initialization of the Slick plugin which is used when there are multiple images.

Is there any way to stop the behavior?

[Matt Zimmermann]

Hi Leslie,

You might try adapting some of the native lazy loading practices used in Shadows and maybe altering the setting in the JavaScript/CSS to better fine-tine the loading display to your liking.