基于Cookie与JavaScript的响应式图片实现疑问求助

Hey there! Let's break this down step by step so you can get that responsive image setup working with cookies, filling in the missing setup details from your cookbook and the article you found.

第一步：明确必备的文件结构 #

First, let's organize your files properly—this matches what you already have (2 files + 3 images) with clear roles:

• index.html (Your main web page where the image will display)
• responsive-images.js (Core script for handling cookies and image switching)
• styles.css (Optional, for basic page styling to make the layout cleaner)
• images/ folder (Store your 3 differently sized images here; name them intuitively like hero-small.jpg, hero-medium.jpg, hero-large.jpg)

第二步：编写HTML文件 #

Paste this into index.html, and replace the image paths with your own:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Images with Cookies</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- Responsive image with data attributes for different sizes -->
    <img class="responsive-img" 
         data-small="images/hero-small.jpg"
         data-medium="images/hero-medium.jpg"
         data-large="images/hero-large.jpg"
         alt="Responsive Hero Image">

    <!-- Load script at the end to ensure DOM is ready -->
    <script src="responsive-images.js"></script>
</body>
</html>

第三步：编写核心JS脚本 #

I've simplified and commented the logic for your JavaScript skill level, combining the cookbook and article concepts:

// 1. Detect current screen size category
function getScreenSize() {
    const width = window.innerWidth;
    if (width < 600) return 'small';
    if (width < 1024) return 'medium';
    return 'large';
}

// 2. Save screen size to a cookie (expires in 1 day)
function setSizeCookie(size) {
    document.cookie = `screenSize=${size}; expires=${new Date(Date.now() + 86400000).toUTCString()}; path=/`;
}

// 3. Retrieve saved screen size from cookies
function getSizeCookie() {
    const cookies = document.cookie.split('; ');
    for (let cookie of cookies) {
        const [name, value] = cookie.split('=');
        if (name === 'screenSize') return value;
    }
    return null;
}

// 4. Update images based on screen size (from cookie or current viewport)
function updateResponsiveImages() {
    const size = getSizeCookie() || getScreenSize();
    const images = document.querySelectorAll('.responsive-img');
    
    images.forEach(img => {
        const targetSrc = img.getAttribute(`data-${size}`);
        if (targetSrc) img.src = targetSrc;
    });
}

// 5. Run on page load and window resize
window.addEventListener('load', () => {
    const currentSize = getScreenSize();
    const savedSize = getSizeCookie();
    
    // Update cookie if no saved size or screen size changed
    if (!savedSize || savedSize !== currentSize) {
        setSizeCookie(currentSize);
    }
    updateResponsiveImages();
});

window.addEventListener('resize', () => {
    const currentSize = getScreenSize();
    const savedSize = getSizeCookie();
    
    if (savedSize !== currentSize) {
        setSizeCookie(currentSize);
        updateResponsiveImages();
    }
});

第四步：可选基础CSS（美化页面） #

If you want a clean layout, add this to styles.css:

body {
    margin: 0;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #f0f0f0;
}

.responsive-img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

Quick Logic Breakdown (For Your JS Basics) #

• Cookies: Save the user's initial screen size so returning visitors load the right image immediately
• Data Attributes: Store all image variants in the <img> tag, so JS can pick the right one based on size
• Resize Listener: Automatically update the image and cookie when the user resizes their browser window

Test It Out #

1. Arrange your files exactly as the structure above
2. Open index.html in a browser, resize the window, and check if the image switches
3. Close and reopen the browser to confirm the cookie loads the last-used size's image

内容的提问来源于stack exchange，提问作者webD