https://guangtai.com.cn/scripts/imageLazy.js

1 document.addEventListener('DOMContentLoaded', function() {
2            // 获取所有需要懒加载的图片
3            const lazyImages = document.querySelectorAll('.lazy-image');
4            const defaultImages = document.querySelectorAll('.default-image');
5            const spinners = document.querySelectorAll('.spinner');
6            
7            // 检查浏览器是否支持IntersectionObserver
8            if ('IntersectionObserver' in window) {
9                // 使用IntersectionObserver API
10                const imageObserver = new IntersectionObserver((entries, observer) => {
11                    entries.forEach(entry => {
12                        if (entry.isIntersecting) {
13                            const lazyImage = entry.target;
14                            loadImage(lazyImage);
15                            imageObserver.unobserve(lazyImage);
16                        }
17                    });
18                }, {
19                    rootMargin: '0px 0px 100px 0px' // 提前100px加载
20                });
21                
22                // 观察所有懒加载图片
23                lazyImages.forEach(image => {
24                    imageObserver.observe(image);
25                });
26            } else {
27                // 回退方案：使用滚动事件监听
28                console.log('IntersectionObserver not supported, using scroll event fallback');
29                
30                // 添加滚动事件监听（带节流）
31                let lazyLoadThrottleTimeout;
32                function lazyLoad() {
33                    if (lazyLoadThrottleTimeout) {
34                        clearTimeout(lazyLoadThrottleTimeout);
35                    }
36                    
37                    lazyLoadThrottleTimeout = setTimeout(function() {
38                        const scrollTop = window.pageYOffset;
39                        lazyImages.forEach(image => {
40                            if (image.offsetTop < (window.innerHeight + scrollTop + 100)) {
41                                loadImage(image);
42                            }
43                        });
44                        
45                        // 如果所有图片都已加载，移除事件监听
46                        if (document.querySelectorAll('.lazy-image:not([src])').length === 0) {
47                            window.removeEventListener('scroll', lazyLoad);
48                            window.removeEventListener('resize', lazyLoad);
49                            window.removeEventListener('orientationchange', lazyLoad);
50                        }
51                    }, 20);
52                }
53                
54                // 初始加载可视区域内的图片
55                lazyLoad();
56                
57                // 添加事件监听
58                window.addEventListener('scroll', lazyLoad);
59                window.addEventListener('resize', lazyLoad);
60                window.addEventListener('orientationchange', lazyLoad);
61            }
62            
63            // 加载图片的函数
64            function loadImage(image) {
65                const src = image.getAttribute('data-src');
66                if (!src) return;
67                
68                // 创建新的Image对象预加载
69                const img = new Image();
70                img.src = src;
71                
72                img.onload = () => {
73                    // 设置实际图片的src
74                    image.src = src;
75                    
76                    // 添加loaded类以触发淡入效果
77                    setTimeout(() => {
78                        image.classList.add('loaded');
79                        
80                        // 找到对应的默认图片和spinner
81                        const container = image.closest('.lazybox');
82                        const defaultImg = container.querySelector('.default-image');
83                        const spinner = container.querySelector('.spinner');
84                        
85                        // 隐藏默认图片和spinner
86                        if (defaultImg) {
87                            defaultImg.classList.add('hidden');
88                        }
89                        if (spinner) {
90                            spinner.style.display = 'none';
91                        }
92                    }, 100);
93                };
94                
95                img.onerror = () => {
96                    console.error(`Error loading image: ${src}`);
97                    // 可以在这里设置错误占位图
98                };
99            }
100        });