function initGIFs(root = document) { const gifs = root.querySelectorAll('.bbImageWrapper img, .bbImageWrapper.js-lbImage'); gifs.forEach(gif => { const wrapper = gif.closest('.bbImageWrapper'); if (!wrapper) return; if (wrapper.classList.contains('gif-initialized')) return; wrapper.classList.add('gif-initialized'); let originalSrc = gif.src || gif.dataset.src; // fallback naar data-src // Alleen GIFs if (!originalSrc || !originalSrc.endsWith('.gif')) return; gif.loading = 'lazy'; const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches; // Play button const playBtn = document.createElement('button'); playBtn.className = 'gif-play-button'; playBtn.setAttribute('aria-label', 'Speel GIF af'); playBtn.setAttribute('type', 'button'); playBtn.innerHTML = ''; wrapper.appendChild(playBtn); gif.style.cssText = 'filter: blur(1px) grayscale(30%); transition: filter 0.3s, opacity 0.3s; opacity: 0;'; if (prefersReducedMotion) { playBtn.style.display = 'none'; gif.style.filter = 'grayscale(100%)'; } let isPlaying = false; let firstFrameCaptured = false; function captureFirstFrame() { if (!firstFrameCaptured && !isPlaying) { canvas.width = gif.naturalWidth || gif.width; canvas.height = gif.naturalHeight || gif.height; try { ctx.drawImage(gif, 0, 0); gif.src = canvas.toDataURL('image/png'); firstFrameCaptured = true; wrapper.classList.add('gif-processed'); gif.style.opacity = '1'; if (!prefersReducedMotion) playBtn.style.opacity = '1'; } catch (e) { wrapper.classList.add('gif-processed'); gif.style.opacity = '1'; if (!prefersReducedMotion) playBtn.style.opacity = '1'; } } } gif.addEventListener('load', captureFirstFrame, { once: true }); if (gif.complete && gif.naturalWidth > 0) gif.dispatchEvent(new Event('load')); playBtn.addEventListener('click', e => { e.preventDefault(); if (!isPlaying) { gif.style.filter = 'none'; gif.src = ''; gif.src = originalSrc + '?play=' + Date.now(); // force refresh playBtn.style.opacity = '0'; setTimeout(() => playBtn.style.display = 'none', 300); isPlaying = true; } }); }); } // Page load document.addEventListener('DOMContentLoaded', () => initGIFs());
Fitness Seller

Leden die bericht #88 hebben gewaardeerd

Alle (2) Like Like (2)

    1. K
      Like

      Kevjeee

      Cool Novice
      • Topics
        2
      • Berichten
        220
      • Waardering
        94
      • Punten
        38
    2. WickedD
      Like

      WickedD

      Cool Novice
      • Topics
        1
      • Berichten
        76
      • Waardering
        50
      • Punten
        18
  • Laden…
Terug
Naar boven