当前位置：首页 > 后端开发 > 正文

javascript怎么显示图片

JavaScript中，可以使用HTML的` 标签来显示图片，通过设置src 属性指定图片路径“javascript，const img = document.createElement(‘img’);，img.src = ‘path/to/image.jpg’;，document.body.appendChild(img);

JavaScript 显示图片的详细指南

在现代网页开发中,使用 JavaScript 显示图片是非常常见的需求，无论是动态加载图片、实现图片轮播，还是根据用户操作展示特定图片，JavaScript 都提供了灵活且强大的解决方案，本文将详细介绍如何使用 JavaScript 显示图片，包括基本方法、进阶技巧以及常见问题解答。

使用 JavaScript 显示图片的基本方法

通过修改 HTML 元素的 src 属性

最直接的方法是使用 JavaScript 修改 <img> 标签的 src 属性，首先需要在 HTML 中创建一个 <img> 元素，然后通过 JavaScript 脚本来更改其 src 属性以显示不同的图片。

HTML 结构：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">JavaScript 显示图片示例</title>
</head>
<body>
    <img id="myImage" src="default.jpg" alt="展示图片" width="500">
    <br>
    <button onclick="changeImage('image1.jpg')">显示图片1</button>
    <button onclick="changeImage('image2.jpg')">显示图片2</button>
    <button onclick="changeImage('image3.jpg')">显示图片3</button>
    <script>
        function changeImage(imageSrc) {
            var imgElement = document.getElementById('myImage');
            imgElement.src = imageSrc;
        }
    </script>
</body>
</html>

说明：

  • id="myImage"：为 <img> 元素设置一个唯一的 ID，方便 JavaScript 获取。
  • onclick="changeImage('image1.jpg')"：当按钮被点击时，调用 changeImage 函数并传入新的图片路径。
  • changeImage 函数：获取 <img> 元素并修改其 src 属性，从而显示新的图片。

动态创建 <img> 元素

除了修改现有图片的 src，还可以使用 JavaScript 动态创建新的 <img> 元素并将其添加到页面中。

示例代码：

function addImage(imageSrc, altText, width, height) {
    var img = document.createElement('img');
    img.src = imageSrc;
    img.alt = altText;
    img.width = width;
    img.height = height;
    document.body.appendChild(img); // 将图片添加到页面的 body 中
}
// 调用函数添加图片
addImage('newImage.jpg', '新添加的图片', 400, 300);

说明：

  • document.createElement('img')：创建一个新的 <img> 元素。
  • 设置 src、alt、width 和 height 属性。
  • document.body.appendChild(img)：将创建的图片元素添加到页面的 <body> 中。

使用 CSS 和 JavaScript 控制图片显示

有时,可能需要根据某些条件显示或隐藏图片，这可以通过修改图片的 CSS 样式来实现。

示例代码：

javascript怎么显示图片 第1张

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">控制图片显示示例</title>
    <style>
        .hidden {
            display: none;
        }
    </style>
</head>
<body>
    <img id="toggleImage" src="visible.jpg" alt="可切换显示的图片" width="500">
    <br>
    <button onclick="toggleImage()">切换图片显示</button>
    <script>
        function toggleImage() {
            var img = document.getElementById('toggleImage');
            if (img.style.display === 'none') {
                img.style.display = 'block';
                img.src = 'visible.jpg'; // 显示的图片
            } else {
                img.style.display = 'none';
                // 如果需要，可以设置隐藏时的图片
                // img.src = 'hidden.jpg';
            }
        }
    </script>
</body>
</html>

说明：

  • 定义了一个 .hidden 类，设置 display: none; 用于隐藏元素。
  • toggleImage 函数通过检查当前图片的 display 样式来切换显示状态。
  • 可以根据需要修改 src 属性，以在显示和隐藏时切换不同的图片。

进阶技巧与应用

预加载图片以提高性能

在动态显示图片时,预先加载图片可以避免在需要时出现延迟，可以使用 JavaScript 创建一个新的 Image 对象来预加载图片。

示例代码：

function preloadImages(imageArray) {
    var images = [];
    for (var i = 0; i < imageArray.length; i++) {
        var img = new Image();
        img.src = imageArray[i];
        images.push(img);
    }
    return images;
}
// 使用示例
var imagesToPreload = ['image1.jpg', 'image2.jpg', 'image3.jpg'];
preloadImages(imagesToPreload);

说明：

  • 创建一个新 Image 对象并设置其 src 属性，浏览器会开始加载图片。
  • 将加载好的图片对象存储在数组中,以便后续使用。

实现图片轮播（Carousel）

图片轮播是一种常见的展示多张图片的方式,通常结合 CSS 和 JavaScript 实现自动或手动切换图片。

示例代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">图片轮播示例</title>
    <style>
        .carousel {
            position: relative;
            width: 600px;
            height: 400px;
            overflow: hidden;
            margin: auto;
        }
        .carousel img {
            position: absolute;
            width: 100%;
            height: 100%;
            display: none;
        }
        .carousel img.active {
            display: block;
        }
        .carousel button {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background-color: rgba(0,0,0,0.5);
            color: white;
            border: none;
            padding: 10px;
            cursor: pointer;
        }
        .carousel button#prev {
            left: 10px;
        }
        .carousel button#next {
            right: 10px;
        }
    </style>
</head>
<body>
    <div class="carousel" id="carousel">
        <img src="image1.jpg" alt="图片1" class="active">
        <img src="image2.jpg" alt="图片2">
        <img src="image3.jpg" alt="图片3">
        <button id="prev" onclick="prevImage()">上一张</button>
        <button id="next" onclick="nextImage()">下一张</button>
    </div>
    <script>
        let currentIndex = 0;
        const images = document.querySelectorAll('#carousel img');
        const totalImages = images.length;
        function showImage(index) {
            images.forEach((img, i) => {
                img.classList.remove('active');
                if (i === index) {
                    img.classList.add('active');
                }
            });
            currentIndex = index;
        }
        function nextImage() {
            let nextIndex = (currentIndex + 1) % totalImages;
            showImage(nextIndex);
        }
        function prevImage() {
            let prevIndex = (currentIndex 1 + totalImages) % totalImages;
            showImage(prevIndex);
        }
        // 自动轮播，每3秒切换一次
        setInterval(nextImage, 3000);
    </script>
</body>
</html>

说明：

  • HTML 结构：包含多个 <img> 元素，其中第一张图片具有 active 类以显示，两个按钮用于手动切换图片。
  • CSS 样式：设置轮播容器的大小，绝对定位图片以堆叠在一起，只有具有 active 类的图片显示，按钮定位在轮播容器的左右两侧。
  • JavaScript 功能：
    • showImage 函数：根据索引显示对应的图片，移除其他图片的 active 类。
    • nextImage 和 prevImage 函数：计算下一个或上一个图片的索引，并调用 showImage。
    • setInterval：设置自动轮播，每3秒调用一次 nextImage。

响应式图片显示

在移动设备和不同屏幕尺寸下,确保图片能够自适应显示非常重要，可以使用 CSS 的媒体查询和 JavaScript 来处理响应式图片显示。

示例代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">响应式图片示例</title>
    <style>
        .responsive-image {
            max-width: 100%;
            height: auto;
        }
    </style>
</head>
<body>
    <img id="responsiveImg" src="wideImage.jpg" alt="响应式图片" class="responsive-image">
    <button onclick="changeResponsiveImage('narrowImage.jpg')">更换窄图</button>
    <button onclick="changeResponsiveImage('wideImage.jpg')">更换宽图</button>
    <script>
        function changeResponsiveImage(imageSrc) {
            var img = document.getElementById('responsiveImg');
            img.src = imageSrc;
        }
    </script>
</body>
</html>

说明：

  • CSS：.responsive-image 类设置 max-width: 100%; 和 height: auto;，确保图片在不同屏幕尺寸下按比例缩放。
  • JavaScript：通过修改 src 属性更换不同尺寸的图片，适应不同布局需求。

使用事件监听器动态显示图片

可以根据用户的操作（如点击、悬停等）动态显示图片，鼠标悬停在缩略图上时显示大图。

示例代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">事件监听显示图片示例</title>
    <style>
        .thumbnail {
            width: 100px;
            height: 75px;
            cursor: pointer;
            margin: 10px;
        }
        #largeImage {
            width: 500px;
            height: 375px;
            border: 1px solid #ccc;
            margin: 20px auto;
        }
    </style>
</head>
<body>
    <div style="text-align:center;">
        <img src="thumb1.jpg" alt="缩略图1" class="thumbnail" data-large="large1.jpg">
        <img src="thumb2.jpg" alt="缩略图2" class="thumbnail" data-large="large2.jpg">
        <img src="thumb3.jpg" alt="缩略图3" class="thumbnail" data-large="large3.jpg">
    </div>
    <div style="text-align:center;">
        <img id="largeImage" src="large1.jpg" alt="大图">
    </div>
    <script>
        var thumbnails = document.querySelectorAll('.thumbnail');
        var largeImage = document.getElementById('largeImage');
        thumbnails.forEach(function(thumb) {
            thumb.addEventListener('mouseover', function() {
                var largeSrc = this.getAttribute('data-large');
                largeImage.src = largeSrc;
            });
        });
    </script>
</body>
</html>

说明：

  • HTML 结构：多个缩略图，每个缩略图通过 data-large 属性关联对应的大图，一个用于显示大图的 <img> 元素。
  • CSS 样式：设置缩略图和大图的尺寸及样式。
  • JavaScript：为每个缩略图添加 mouseover 事件监听器，当鼠标悬停在缩略图上时，获取 data-large 属性的值并设置为大图的 src，从而显示对应的大图。

使用 JavaScript 库简化图片显示

为了提高开发效率和实现更复杂的效果,可以使用一些流行的 JavaScript 库来处理图片显示，以下是几个常用的库及其简要介绍：

Lightbox2 优雅的图片查看器

Lightbox2 是一个轻量级的 JavaScript 库，用于创建覆盖整个页面的图片查看器，适用于展示单张或多张图片，它支持多种效果和自定义选项。

使用方法：

  1. 引入 Lightbox2 文件：下载 Lightbox2 或通过 CDN 引入。

    <!-CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/css/lightbox.min.css" rel="stylesheet">
<!-JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/js/lightbox.min.js"></script>

  2. 修改图片链接：将图片的 href 属性指向图片本身，并添加 data-lightbox 属性。

    <a href="image1.jpg" data-lightbox="gallery" data-title="图片1标题">
    <img src="thumb1.jpg" alt="缩略图1">
</a>

  3. 配置选项：可以通过数据属性或初始化脚本自定义 Lightbox 的行为和样式。

Slick 强大的轮播库

Slick 是一个功能强大的轮播库，支持响应式设计、多种动画效果、自定义导航等，适用于创建复杂的图片轮播效果。

使用方法：

  1. 引入 Slick 文件：通过 CDN 或下载引入 Slick 的 CSS 和 JavaScript 文件。

    <!-CSS -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css"/>
<!-JavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>

  2. HTML 结构：将轮播的图片包裹在一个容器中。

    <div class="your-class">
    <div><img src="image1.jpg" alt="图片1"></div>
    <div><img src="image2.jpg" alt="图片2"></div>
    <div><img src="image3.jpg" alt="图片3"></div>
    <!-可以添加更多图片 -->
</div>

  3. 初始化 Slick：使用 JavaScript 初始化轮播，并配置选项。

    $('.your-class').slick({
    dots: true, // 显示导航点
    infinite: true, // 无限循环
    speed: 500, // 过渡速度
    slidesToShow: 1, // 每次显示的图片数量
    arrows: true // 显示前后箭头导航
});

LazyLoad 延迟加载图片

LazyLoad 是一种优化技术，用于延迟加载页面中的图片，只有在用户滚动到图片附近时才加载，从而提高页面加载速度和性能，可以使用第三方库如 lazysizes 或原生的 IntersectionObserver API。

使用 IntersectionObserver 实现懒加载：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">懒加载图片示例</title>
    <style>
        .placeholder {
            width: 500px;
            height: 300px;
            background-color: #f0f0f0;
            margin: 20px auto;
        }
        img {
            width: 100%;
            height: auto;
            display: block;
        }
    </style>
</head>
<body>
    <div class="placeholder" data-src="image1.jpg" alt="懒加载图片1"></div>
    <div class="placeholder" data-src="image2.jpg" alt="懒加载图片2"></div>
    <div class="placeholder" data-src="image3.jpg" alt="懒加载图片3"></div>
    <!-更多占位符 -->
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            var placeholders = document.querySelectorAll('.placeholder');
            var observerOptions = {
                root: null, // 视口作为根元素
                rootMargin: '0px', // 无边距阈值
                threshold: 0.1 // 目标至少10%可见时触发回调
            };
            var observer = new IntersectionObserver(function(entries, observer) {
                entries.forEach(function(entry) {
                    if (entry.isIntersecting) { // 如果元素进入视口
                        var placeholder = entry.target;
                        var img = document.createElement('img');
                        img.src = placeholder.getAttribute('data-src');
                        img.alt = placeholder.getAttribute('alt');
                        placeholder.parentNode.replaceChild(img, placeholder); // 替换占位符为真实图片
                        observer.unobserve(placeholder); // 停止观察已加载的元素
                    }
                });
            }, observerOptions);
            placeholders.forEach(function(placeholder) {
                observer.observe(placeholder); // 开始观察每个占位符元素的位置信息变化情况，即是否进入视口范围内，当满足设定的条件时（比如元素出现在视口中），就会执行相应的回调函数，我们为每个占位符元素注册了观察者，以便在其进入视口时加载真实的图片资源，这样可以实现按需加载，提高页面性能和用户体验，特别是对于包含大量图片的长页面来说，这种技术尤为重要，因为它可以显著减少初始加载时间，避免一次性加载所有图片导致的性能问题，通过调整 `threshold` 参数，还可以控制提前加载的距离，进一步优化用户体验。

vascript 显示
0

相关文章