Implémentation de la pagination d'images nodejs

À mesure que le site Web se développe, le nombre d'images à afficher augmente également. Si vous chargez aveuglément toutes les images en même temps, cela affectera non seulement l'expérience utilisateur, mais réduira également les performances du site Web. Par conséquent, la mise en œuvre de la pagination d'images devient de plus en plus importante.

Cet article présentera principalement comment utiliser Node.js pour implémenter la pagination d'images. Avant cela, présentons brièvement les principes et les exigences de la pagination d’images.

Le principe de la pagination d'images

Le principe de la pagination d'images est très simple, c'est-à-dire que plusieurs images sont divisées en plusieurs pages pour être affichées et que les utilisateurs peuvent parcourir ces images à travers différents numéros de page. Pour la mettre en œuvre, il suffit de diviser toutes les images en plusieurs groupes en fonction du nombre d'images à afficher sur chaque page, et de renvoyer le groupe d'images correspondant au numéro de page selon la demande de l'utilisateur.

Exigences pour la pagination d'images

Avant de mettre en œuvre la pagination d'images, nous devons déterminer les exigences réelles pour une meilleure mise en œuvre. Par exemple :

• Combien d’images sont affichées par page ?
• Comment diviser toutes les images en combien de pages ? (Combien de photos y a-t-il, combien de photos par page)
• Comment obtenir le numéro de page demandé par l'utilisateur ?
• Comment précharger des images ?

Ensuite, cet article implémentera un exemple simple de pagination d'images via du code pour résoudre les problèmes ci-dessus.

1. Méthode d'implémentation

Tout d'abord, nous avons besoin d'une source de données d'image (dans cet exemple, une image d'un package npm nommé "dog" est utilisée). Nous utilisons le module fs dans Node.js pour lire l'image et utilisons le module express pour créer le serveur et envoyer l'image au client. Le code spécifique est le suivant :

// 引入依赖包和模块
const express = require('express')
const fs = require('fs')

const app = express()

app.get('/images/:page', (req, res) => {
  const imagesPerPage = 6 // 每页展示6张图片
  const page = req.params.page
  const start = (page - 1) * imagesPerPage // 初始图片位置
  const end = start + imagesPerPage // 结束图片位置

  // 读取所有图片，并将其分页
  fs.readdir(__dirname + '/images', (err, files) => {
    if (err) throw err

    const imageFiles = files.filter(file => {
      return /.(jpe?g|png|gif)$/i.test(file)
    })
    const totalPages = Math.ceil(imageFiles.length / imagesPerPage) // 计算总页数

    // 返回指定页码的图片
    res.send({
      images: imageFiles.slice(start, end),
      totalPages: totalPages
    })
  })
})

app.listen(3000, () => {
  console.log('Server running on http://localhost:3000')
})

Exécutez le programme, puis visitez http://localhost:3000/images/1 dans le navigateur. Vous verrez 6 images affichées sur chaque page. Actualisez la page ou modifiez "1". vers d’autres numéros. Vous pouvez visualiser des images provenant d’autres pages.

2. Implémenter le préchargement

Afin d'optimiser l'expérience utilisateur, lorsque l'utilisateur navigue vers une certaine page, nous devons commencer à précharger les images de la page suivante. Le code spécifique est le suivant :

// 引入依赖包和模块
const express = require('express')
const fs = require('fs')

const app = express()

app.get('/images/:page', (req, res) => {
  const imagesPerPage = 6 // 每页展示6张图片
  const page = req.params.page
  const start = (page - 1) * imagesPerPage // 初始图片位置
  const end = start + imagesPerPage // 结束图片位置

  // 读取所有图片，并将其分页
  fs.readdir(__dirname + '/images', (err, files) => {
    if (err) throw err

    const imageFiles = files.filter(file => {
      return /.(jpe?g|png|gif)$/i.test(file)
    })
    const totalPages = Math.ceil(imageFiles.length / imagesPerPage) // 计算总页数

    // 计算下一页的页面地址
    const nextPage = parseInt(page) + 1
    const nextPageUrl = '/images/' + nextPage

    // 返回指定页码的图片及下一页的页面地址
    res.send({
      images: imageFiles.slice(start, end),
      totalPages: totalPages,
      nextPage: nextPageUrl
    })
  })
})

app.listen(3000, () => {
  console.log('Server running on http://localhost:3000')
})

Dans le code ci-dessus, nous avons ajouté la variable nextPageUrl pour renvoyer l'adresse de la page suivante au client. Utilisez JavaScript sur le client pour télécharger l'adresse de nextPageUrl afin de précharger l'image de la page suivante.

3. Résumé

Cet article présente la méthode d'utilisation de Node.js pour réaliser la pagination d'images, et sur cette base, le préchargement des images est implémenté. Dans le développement réel, la pagination des images est une exigence courante. La maîtrise de cet ensemble de méthodes de mise en œuvre contribuera à améliorer l'efficacité du développement et l'expérience utilisateur du projet.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!