1.根据滚动条高度显示图片
可以使用如下代码来实现：
HTML部分：
<div id="image-container"><img src="https://via.placeholder.com/500x400" alt="placeholder image">
</div>
JS部分：
window.addEventListener('scroll', function() {var imageContainer = document.getElementById('image-container');var scrollTop = window.pageYOffset || document.documentElement.scrollTop;if (scrollTop > 200) {imageContainer.style.display = 'block';} else {imageContainer.style.display = 'none';}
});
上述代码监听了浏览器窗口的滚动事件，并根据滚动条的高度来控制图片是否显示。当滚动条的高度大于200时，显示图片，否则隐藏图片。可以根据实际需求自行调整滚动条高度的阈值和图片容器的id。
2.根据定时器来实现懒加载图片
懒加载可以通过定时器来实现，具体实现步骤如下：
-
获取需要懒加载的元素，可以使用querySelectorAll等方法。
-
使用IntersectionObserver API监听元素是否出现在可视区域内，如果出现则加载内容。如果浏览器不支持IntersectionObserver，则可以通过定时器来模拟实现。
-
创建一个定时器，在定时器的回调函数中，判断需要懒加载的元素是否出现在可视区域内，如果是，则加载内容，否则继续等待下一次定时器回调。
下面是一个使用定时器实现懒加载的例子：
// 获取所有需要懒加载的图片元素
const images = document.querySelectorAll('img.lazyload');// 定义一个函数，用来判断元素是否在可视区域内
function isInViewport(el) {const rect = el.getBoundingClientRect();return (rect.bottom >= 0 &&rect.right >= 0 &&rect.top <= (window.innerHeight || document.documentElement.clientHeight) &&rect.left <= (window.innerWidth || document.documentElement.clientWidth));
}// 定义一个定时器，每100ms检查一次需要懒加载的图片是否在可视区域内
const timer = setInterval(() => {images.forEach(img => {if (isInViewport(img)) {// 加载图片img.src = img.dataset.src;// 从需要懒加载的列表中移除该元素images.delete(img);}});// 如果所有图片都已经加载完毕，则取消定时器if (images.length === 0) {clearInterval(timer);}
}, 100);
在上面的例子中，我们首先获取所有需要懒加载的图片元素，然后定义了一个isInViewport函数，用来判断元素是否在可视区域内。
接着我们创建了一个定时器，每100ms检查一次需要懒加载的图片是否在可视区域内。如果图片在可视区域内，则加载该图片，然后从需要懒加载的元素列表中移除该图片。如果所有图片都已经加载完毕，则取消定时器。
需要注意的是，该方法只是一种简单的实现方式，实际应用中还需要考虑各种情况，比如多次触发定时器可能会增加浏览器负担，需要根据具体情况来进行调优。
3.实现滑到屏幕底部进行懒加载
可以通过以下步骤实现滑到屏幕底部进行懒加载：
- 创建一个包含要懒加载的元素的列表或集合。
- 监听窗口的滚动事件。
- 在滚动事件处理程序中，检查滚动位置是否达到了屏幕底部。
- 如果是，则加载下一批元素。
- 每次加载元素时，更新列表或集合中的元素，以保持追加元素的顺序。
以下是一个简单的实现：
// Step 1: 创建包含要懒加载的元素列表
const lazyElements = Array.from(document.querySelectorAll('.lazy'));// Step 2: 监听滚动事件
window.addEventListener('scroll', () => {// Step 3: 检查是否滚动到屏幕底部if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {// Step 4: 加载下一批元素const nextBatch = lazyElements.splice(0, 10); // 加载10个元素nextBatch.forEach(element => {element.src = element.dataset.src; // 设置元素的src属性，触发下载element.classList.remove('lazy'); // 删除.lazy类，避免重复加载});}
});
在这个示例中，我们使用了一个lazy类来标记要懒加载的元素，并将要加载的元素数量设置为10。可以根据需要进行更改。另外，我们假设每个懒加载元素都有一个data-src属性，其中保存了实际要加载的图像的URL。
