Replace placeholder image with loaded 3D viewer

This article will show you how to replace a placeholder product image with a fully loaded and active 3D viewer. It is especially great for data heavy products since it loading of the viewer happens in the background, away from the customers vision.

You can view the full script in action by going to this jsfiddle test page.

Placeholder image

The placeholder image can be any image of your choosing. For this example we are using an image of the Sayduck logo.

<img class="sayduck-3d-viewer-placeholder-image" width="200" src="" />

3D viewer embed code

The embed code we are using is for to our Tutorial Product. You can use this script for your tests and then just replace the data-product-uuid with the one in own product.

To add additional more parameter, check out our 3D viewer documentation.

<div class="sayduck-3d-viewer-container" style="display:none; height:350px; width:100%;"
    data-product-uuid="f9340390-2087-0137-a0d4-6eec82cfb9d4" data-viewer-options='{"appearance":{"background":"gray"}}'>
    </div><script defer type="text/javascript" src=""></script>

Listen to event sayduck.viewer.gltf.loaded and load 3D viewer

This script will listen to the sayduck.viewer.gltf.loaded event and then replace the placeholder image with the 3D viewer ones it has finished loading.

  function(event) {
    console.log(event.detail.uuid) // variant UUID that just finished loading
    // code to hide the image and show the 3D Viewer. More advanced CSS could be used here to have nicer transition
    $('.sayduck-3d-viewer-container').css('display', 'block');
Was this article helpful?
Thank you!