h5移动端触摸相册js

// 示例代码：懒加载
document.addEventListener("DOMContentLoaded", function() {
    let lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));
    if ("IntersectionObserver" in window) {
        let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
            entries.forEach(function(entry) {
                if (entry.isIntersecting) {
                    let lazyImage = entry.target;
                    lazyImage.src = lazyImage.dataset.src;
                    lazyImage.classList.remove("lazy");
                    lazyImageObserver.unobserve(lazyImage);
                }
            });
        });
        lazyImages.forEach(function(lazyImage) {
            lazyImageObserver.observe(lazyImage);
        });
    }
});

// 示例代码：优化触摸滑动
let startX, startY;
document.addEventListener('touchstart', function(event) {
    startX = event.touches[0].clientX;
    startY = event.touches[0].clientY;
});

document.addEventListener('touchmove', function(event) {
    event.preventDefault();
    let moveX = event.touches[0].clientX - startX;
    let moveY = event.touches[0].clientY - startY;
    requestAnimationFrame(function() {
        // 更新图片位置
        document.querySelector('.photo-container').style.transform = `translate(${moveX}px, ${moveY}px)`;
    });
});

// 示例代码：图片缩放
function scaleImage(image, scale) {
    let canvas = document.createElement('canvas');
    let ctx = canvas.getContext('2d');
    canvas.width = image.width * scale;
    canvas.height = image.height * scale;
    ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
    return canvas.toDataURL();
}