鍍金池/ 問答/網(wǎng)絡(luò)安全  HTML/ 用new Image加載的圖片如果不加載到頁面上和加載到頁面上緩存方式是否會(huì)有區(qū)

用new Image加載的圖片如果不加載到頁面上和加載到頁面上緩存方式是否會(huì)有區(qū)別？

  var img = new Image();
            img.onload = () => {
                console.log('loaded')
            }
            img.src = 'https://b-ssl.duitang.com/uploads/item/201807/06/20180706150531_zFhZJ.thumb.700_0.jpeg'

用如上代碼緩存的圖片為什么會(huì)在背景圖片用到同樣圖片時(shí)重新請(qǐng)求？

首先貼下部分實(shí)驗(yàn)代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .world{
            background: url('https://b-ssl.duitang.com/uploads/item/201807/06/20180706150531_zFhZJ.thumb.700_0.jpeg');
            width: 200px;
            height: 200px;
            background-size: 100% 100%;
        }
        .box{
            display: none;
        }
        .a{
            display: none;
        }
        .btn{
            background: white;
        }
    </style>
</head>
<body>
    <div class="hello " id="div">
    </div>
    <div class="a" id="a">
    </div>
    <button id="btn">Click</button>
    <script>
        window.onload = () => {
            var btn = document.getElementById('btn');
            var div = document.getElementById('div')
            btn.addEventListener('click', () => {
                div.classList.toggle('world')
            })
            var img = new Image();
            img.onload = () => {
                console.log('loaded')
            }
            img.src = 'https://b-ssl.duitang.com/uploads/item/201807/06/20180706150531_zFhZJ.thumb.700_0.jpeg'
            
        }
    </script>
</body>
</html>

以下是該代碼的http包

clipboard.png
理論上來講預(yù)加載緩存后只有一個(gè)http請(qǐng)求
但是連續(xù)幾次的實(shí)驗(yàn)結(jié)果居然不一樣

實(shí)驗(yàn)方式如下：
抓包開preserve log
清緩存
刷新然后等一段時(shí)間點(diǎn)click 再刷新再等一會(huì)兒事件點(diǎn)click 反復(fù)多次

————————分割線————————————————————————————————————————

說明：我發(fā)現(xiàn)用這種方式加載圖片，之后的相同圖片還是會(huì)向服務(wù)器重新請(qǐng)求
我的操作方式如下：
1、new Image進(jìn)行圖片預(yù)加載
2、預(yù)加載之后給一個(gè)div添加類，該類代碼如下：

.world{
            background: url('https://b-ssl.duitang.com/uploads/item/201807/06/20180706150531_zFhZJ.thumb.700_0.jpeg');
            width: 200px;
            height: 200px;
            background-size: 100% 100%;
        }

為什么背景圖片不直接讀取new Image預(yù)加載的圖片呢？

回答
編輯回答
柚稚

這個(gè)其實(shí)要看服務(wù)器設(shè)置和瀏覽器設(shè)置，如果設(shè)置是不緩存，則每次請(qǐng)求都還會(huì)去請(qǐng)求。

2017年8月2日 07:55