Nodejs express搭建，js定时切换图片 浏览器刷新闪烁

Nodejs express搭建，js定时切换图片 浏览器刷新闪烁

node express搭建的，里面有个切换banner效果，js里面用的setInterval定时。 再启动app.js以后 每当到了定时以后 都会看见 get /images/banner.jpg 304 1ms get /images/banner.jpg 304 1ms get /images/banner.jpg 304 1ms get /images/banner.jpg 304 1ms … 一直输出

浏览器页面 每次输出的时候 都会因为切换banner 突然闪一下，很不舒服，请问大神这个怎么解决


3 回复

Node.js Express 搭建及定时切换图片问题解决方案

问题描述

在使用 Node.js 和 Express 搭建的应用中，实现了一个轮播图（banner）功能。该功能通过 JavaScript 的 setInterval 定时切换图片。然而，在定时切换过程中，浏览器每切换一次图片都会出现明显的闪烁现象，影响用户体验。

问题原因

这种闪烁现象通常是由于每次图片加载时都需要从服务器重新请求图片资源导致的。即使浏览器缓存了图片，但每次切换时，浏览器仍然会发送请求到服务器，这会导致页面的短暂重绘，从而产生闪烁。

解决方案

1. 使用 Data URL 或 Base64 编码

可以将图片转换为 Data URL 或 Base64 编码，并直接嵌入到 HTML 中。这样可以避免每次请求服务器上的图片资源，从而减少闪烁现象。

示例代码：

const images = [
    "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/2wBDAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/wAARCAABAAEDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAUG/8QAIhAAAQMDBQAAAAAAAAAAAAABEBEiExFBUWFx/8QAFQEBAQAAAAAAAAAAAAAAAAAAAQF/9oADAMBAAIRAxEAPwD/ACGhKgkEiYmJgYiJiYmIiYmJiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIiYmIi

是我自己的问题，结贴

这个问题通常是因为浏览器每次请求相同的图片资源时，都会重新加载该资源，从而导致页面在切换图片时出现闪烁现象。可以通过一些前端和后端的技术手段来优化这个问题。

解决方案

1. 使用 Cache-Control 头

在服务器端设置适当的缓存策略，确保浏览器能够缓存图片资源，而不是每次都从服务器获取新的资源。

示例代码：

const express = require('express');
const app = express();

app.use('/images', express.static(__dirname + '/public/images', {
    maxAge: '1d' // 缓存一天
}));

app.get('/images/banner.jpg', (req, res) => {
    res.sendFile(__dirname + '/public/images/banner.jpg', {
        maxAge: '1d' // 缓存一天
    });
});

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

2. 使用 Etag 或 Last-Modified 头

通过这些头可以更高效地处理资源的缓存和更新情况。

3. 前端使用 Data URI

将小图片转换为 Data URI，并嵌入到 HTML 中，这样浏览器就不需要再发送网络请求来获取图片。

示例代码：

<div id="banner">
    <img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/...省略 base64 编码内容..." alt="Banner" />
</div>

总结

通过设置适当的缓存策略和减少不必要的网络请求，可以有效避免页面切换图片时的闪烁问题。根据实际情况选择合适的方法进行优化。

回到顶部