(function() {
var isFirstViewer = true;
var productId = '50642';
console.log('[3D Lazy Product] Script loaded! Product ID:', productId, 'First:', isFirstViewer);
// Lazy loading voor 3D modellen - alleen eerste model laadt automatisch
var initLazyLoading = function(modelViewer) {
if (!modelViewer || modelViewer.dataset.lazyInitialized) return;
modelViewer.dataset.lazyInitialized = 'true';
var container = modelViewer.closest('.modelViewerBlock, .b3dviewer');
if (!container) return;
var slides = container.querySelectorAll('.slide');
if (slides.length 20) return; // max 2 seconden
setTimeout(function() {
var currentSrc = modelViewer.getAttribute('src');
if (currentSrc === newSrc) {
console.log('[3D Lazy] Revealing model:', newSrc);
if (typeof modelViewer.reveal === 'function') {
modelViewer.reveal();
}
loadedModels[newSrc] = true;
} else {
checkAndReveal(attempts + 1);
}
}, 100);
};
checkAndReveal(0);
} else {
// Al geladen
modelViewer.setAttribute('loading', 'eager');
modelViewer.setAttribute('reveal', 'auto');
}
}, true); // Capture phase!
});
};
// Nieuwe lazy loading logica voor hele producten
var initProductLazyLoading = function(container) {
if (!container) return;
// Als dit NIET het eerste product is, wacht op interactie
if (!isFirstViewer) {
console.log('[3D Product Lazy] Waiting for interaction for product:', productId);
var hasLoaded = false;
var loadModel = function() {
if (hasLoaded) return;
hasLoaded = true;
console.log('[3D Product Lazy] Loading model on interaction - Product:', productId);
console.log('[3D Product Lazy] Container element:', container);
console.log('[3D Product Lazy] Container classes:', container.className);
// Update classes en text
container.classList.remove('lazy-load-pending');
container.classList.add('lazy-load-active');
var overlay = container.querySelector('.lazy-load-overlay');
if (overlay) {
var text = overlay.querySelector('.lazy-load-text');
if (text) text.textContent = '⏳ Laden...';
}
// NIEUWE STRATEGIE: Haal data uit script tag
var scriptTag = container.querySelector('script.bp3d-lazy-data');
console.log('[3D Product Lazy] Script tag found:', !!scriptTag);
if (!scriptTag) {
console.log('[3D Product Lazy] No script tag found for product:', productId);
return;
}
var pendingData = scriptTag.textContent || scriptTag.innerHTML;
console.log('[3D Product Lazy] Lazy data exists:', !!pendingData);
console.log('[3D Product Lazy] Lazy data length:', pendingData ? pendingData.length : 0);
if (pendingData) {
console.log('[3D Product Lazy] Activating component - direct injection for product:', productId);
// Parse de pending data
var attributes = JSON.parse(pendingData);
console.log('[3D Product Lazy] Parsed attributes:', attributes);
// Verwijder overlay
if (overlay) overlay.remove();
container.classList.remove('lazy-load-pending', 'lazy-load-active');
// DIRECT MODEL-VIEWER INJECTEREN - geen React, geen template
var modelData = attributes.model || (attributes.models && attributes.models[0]) || {};
var styles = attributes.styles || {};
// Maak model-viewer element
var modelViewerHTML = '';
// Voeg loading overlay toe
var loadingHTML = '
';
loadingHTML += '
';
loadingHTML += '';
loadingHTML += '
3D Model laden...
';
loadingHTML += '
';
console.log('[3D Product Lazy] Injecting model-viewer with loading overlay');
container.style.position = 'relative';
container.innerHTML = modelViewerHTML + loadingHTML;
// Voeg spinner animatie toe (als die nog niet bestaat)
if (!document.getElementById('bp3d-spinner-style')) {
var style = document.createElement('style');
style.id = 'bp3d-spinner-style';
style.textContent = '@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }';
document.head.appendChild(style);
}
// Verwijder script tag
if (scriptTag && scriptTag.parentNode) {
scriptTag.parentNode.removeChild(scriptTag);
}
console.log('[3D Product Lazy] Model-viewer injected for product:', productId);
// Wacht tot model-viewer element bestaat en voeg load listener toe
setTimeout(function() {
var injectedViewer = container.querySelector('model-viewer');
var loadingOverlay = container.querySelector('.bp3d-loading-overlay');
if (injectedViewer) {
console.log('[3D Product Lazy] Model-viewer found, adding load listener');
// Verwijder loading overlay wanneer model geladen is
injectedViewer.addEventListener('load', function() {
console.log('[3D Product Lazy] Model loaded! Removing overlay');
if (loadingOverlay) {
loadingOverlay.style.transition = 'opacity 0.3s';
loadingOverlay.style.opacity = '0';
setTimeout(function() {
if (loadingOverlay.parentNode) {
loadingOverlay.parentNode.removeChild(loadingOverlay);
}
}, 300);
}
});
// Fallback: verwijder overlay na 10 seconden als het model niet laadt
setTimeout(function() {
if (loadingOverlay && loadingOverlay.parentNode) {
console.log('[3D Product Lazy] Timeout: removing overlay anyway');
loadingOverlay.parentNode.removeChild(loadingOverlay);
}
}, 10000);
// Initialiseer lazy loading voor multiple models
initLazyLoading(injectedViewer);
} else {
console.log('[3D Product Lazy] ERROR: Model-viewer not found after injection');
}
}, 100);
return; // Stop hier
}
// Oude code hieronder als fallback
if (false) {
var firstViewer = null;
if (firstViewer) {
console.log('[3D Product Lazy] Found first viewer, cloning structure');
// Clone de structure van het eerste model
var templateContent = firstViewer.querySelector('.b3dviewer, [class*="b3d"]');
if (templateContent) {
// Clone het template
var newViewer = templateContent.cloneNode(true);
// Update de data in het geclonede element
var modelViewerEl = newViewer.querySelector('model-viewer');
if (modelViewerEl && attributes.models && attributes.models[0]) {
var firstModel = attributes.models[0];
// Update model-viewer attributes
modelViewerEl.setAttribute('src', firstModel.modelUrl || '');
if (firstModel.poster) modelViewerEl.setAttribute('poster', firstModel.poster);
if (firstModel.skyboxImage) modelViewerEl.setAttribute('skybox-image', firstModel.skyboxImage);
if (firstModel.environmentImage) modelViewerEl.setAttribute('environment-image', firstModel.environmentImage);
if (firstModel.exposure) modelViewerEl.setAttribute('exposure', firstModel.exposure);
// AR settings
if (firstModel.arEnabled) {
modelViewerEl.setAttribute('ar', '');
if (firstModel.arMode) modelViewerEl.setAttribute('ar-modes', firstModel.arMode);
if (firstModel.arPlacement) modelViewerEl.setAttribute('ar-placement', firstModel.arPlacement);
if (firstModel.modelISOSrc) modelViewerEl.setAttribute('ios-src', firstModel.modelISOSrc);
}
// Viewer settings
if (attributes.zoom) modelViewerEl.setAttribute('zoom', '');
if (attributes.autoRotate) modelViewerEl.setAttribute('auto-rotate', '');
if (attributes.mouseControl) modelViewerEl.setAttribute('camera-controls', '');
if (attributes.shadow) modelViewerEl.setAttribute('shadow-intensity', attributes.shadow);
console.log('[3D Product Lazy] Model-viewer configured for product:', productId);
}
// Verwijder overlay en inject nieuwe viewer
if (overlay) overlay.remove();
container.classList.remove('lazy-load-pending', 'lazy-load-active');
container.innerHTML = '';
container.appendChild(newViewer);
console.log('[3D Product Lazy] New viewer injected successfully');
// Verwijder script tag en update data-attributes
if (scriptTag && scriptTag.parentNode) {
scriptTag.parentNode.removeChild(scriptTag);
}
container.setAttribute('data-attributes', pendingData);
// Initialiseer lazy loading voor dit model
setTimeout(function() {
var viewer = container.querySelector('model-viewer');
if (viewer) {
console.log('[3D Product Lazy] Initializing lazy loading for injected viewer');
initLazyLoading(viewer);
}
}, 100);
return; // Exit early, we're done
}
}
// Fallback: probeer normale React init (oude code)
console.log('[3D Product Lazy] No template found, trying React init');
if (overlay) overlay.style.display = 'none';
// Verwijder script tag
if (scriptTag && scriptTag.parentNode) {
scriptTag.parentNode.removeChild(scriptTag);
}
container.setAttribute('data-attributes', pendingData);
container.classList.remove('lazy-load-pending');
container.classList.add('lazy-load-active');
// Probeer alle init methods
setTimeout(function() {
if (window.bp3d && window.bp3d.init) window.bp3d.init(container);
if (window.bp3dInitViewer) window.bp3dInitViewer(container);
if (window.bp3dScanContainers) window.bp3dScanContainers();
console.log('[3D Product Lazy] React init attempted');
}, 100);
} else {
console.log('[3D Product Lazy] No pending data found for product:', productId);
}
// Wacht tot model-viewer verschijnt
var checkAndInit = function(attempts) {
if (attempts > 50) {
console.log('[3D Product Lazy] Timeout waiting for viewer');
container.classList.remove('lazy-load-active');
if (overlay) overlay.remove();
return;
}
var viewer = container.querySelector('model-viewer');
if (viewer) {
console.log('[3D Product Lazy] Found viewer after', attempts * 100, 'ms');
if (overlay) {
overlay.style.transition = 'opacity 0.3s';
overlay.style.opacity = '0';
setTimeout(function() { overlay.remove(); }, 300);
}
container.classList.remove('lazy-load-active');
initLazyLoading(viewer);
} else {
setTimeout(function() { checkAndInit(attempts + 1); }, 100);
}
};
checkAndInit(0);
};
// Laad bij click
container.addEventListener('click', loadModel, { once: true });
} else {
// Eerste product: laad direct
console.log('[3D Product Lazy] First product, loading immediately:', productId);
}
};
// Check of model-viewer al bestaat
var checkExisting = function() {
var container = document.querySelector('.modelViewerBlock[data-product-id="' + productId + '"]');
if (container) {
initProductLazyLoading(container);
var existingViewer = container.querySelector('model-viewer');
if (existingViewer) {
console.log('[3D Lazy] Found existing viewer for product:', productId);
initLazyLoading(existingViewer);
return true;
}
}
return false;
};
// Probeer direct
if (!checkExisting()) {
// Watch voor nieuwe model-viewers
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
mutation.addedNodes.forEach(function(node) {
if (node.tagName === 'MODEL-VIEWER') {
console.log('[3D Lazy] Model-viewer added via mutation');
initLazyLoading(node);
observer.disconnect();
} else if (node.querySelectorAll) {
var viewers = node.querySelectorAll('model-viewer');
if (viewers.length > 0) {
viewers.forEach(initLazyLoading);
observer.disconnect();
}
}
});
});
});
var targetNode = document.querySelector('.modelViewerBlock[data-product-id="' + productId + '"]');
if (targetNode) {
initProductLazyLoading(targetNode);
observer.observe(targetNode, { childList: true, subtree: true });
}
// Fallback
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', function() {
setTimeout(checkExisting, 100);
});
}
window.addEventListener('load', function() {
setTimeout(checkExisting, 500);
});
}
})();
Magimals
Reviews
There are no reviews yet.