14、动态添加图片：优化画廊性能与用户体验-优快云博客

本文链接：https://blog.youkuaiyun.com/a1b2c/article/details/149472598

动态添加图片：优化画廊性能与用户体验

1. 引言

在现代网页开发中，图片画廊是展示图片和多媒体内容的重要方式。随着图片数量的增加，一次性加载所有图片可能导致页面加载缓慢，影响用户体验。为了避免这种情况，我们可以采用动态加载图片的技术，即懒加载（Lazy Loading），以提升画廊的性能和用户体验。本文将详细介绍如何通过触发网页事件或在用户浏览画廊时动态添加图片，实现懒加载。

2. 准备工作

为了实现动态加载图片，我们需要确保所有图片存放在一个单独的目录中，并遵循特定的命名约定。这样可以方便我们根据命名规则动态加载更多图片。例如，假设图片文件名格式为 image1-200px.jpg 和 image1-1600px.jpg ，分别表示缩略图和大图。

2.1 文件结构

首先，我们需要创建一个 HTML 文件 dynamic-images.html ，作为画廊的基本结构。文件内容如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="http://code.jquery.com/jquery.min.js"></script>
    <script src="../galleria-1.2.8.min.js"></script>
    <script type="text/javascript">