jquery 图片跳动

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。图片跳动通常是指页面上的图片元素在加载或显示时出现的不稳定现象，这可能是由于网络延迟、图片资源过大或浏览器渲染问题导致的。

类型

加载跳动：图片在加载过程中出现闪烁或跳动。
显示跳动：图片在显示时位置或大小发生变化。

应用场景

网页设计中的图片轮播效果。
图片加载时的占位符效果。
动态加载图片时的平滑过渡效果。

问题原因及解决方法

1. 加载跳动

原因：

网络延迟导致图片加载缓慢。
图片资源过大，浏览器渲染缓慢。
图片加载顺序不一致，导致布局抖动。

解决方法：

使用图片懒加载技术，按需加载图片。
预加载关键图片资源。
使用 CSS 设置图片的初始尺寸，避免布局抖动。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Flicker Example</title>
    <style>
        img {
            width: 200px;
            height: 200px;
            display: block;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <img data-src="path/to/image.jpg" alt="Example Image">

    <script>
        $(document).ready(function() {
            $('img').each(function() {
                var img = new Image();
                img.src = $(this).data('src');
                img.onload = function() {
                    $(this).attr('src', img.src);
                };
            });
        });
    </script>
</body>
</html>

2. 显示跳动

原因：

图片加载完成后，尺寸发生变化导致布局抖动。
CSS 动画或 JavaScript 操作导致的元素位置变化。

解决方法：

使用 CSS 设置图片的初始尺寸和位置。
使用 visibility 和 opacity 属性实现平滑过渡效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Display Flicker Example</title>
    <style>
        img {
            width: 200px;
            height: 200px;
            visibility: hidden;
            opacity: 0;
            transition: visibility 0s, opacity 0.5s linear;
        }
        img.loaded {
            visibility: visible;
            opacity: 1;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <img data-src="path/to/image.jpg" alt="Example Image">

    <script>
        $(document).ready(function() {
            $('img').each(function() {
                var img = new Image();
                img.src = $(this).data('src');
                img.onload = function() {
                    $(this).attr('src', img.src).addClass('loaded');
                };
            });
        });
    </script>
</body>
</html>

通过以上方法，可以有效减少或消除 jQuery 图片跳动的问题，提升用户体验。