預加載圖片？

Question

我一直在研究使用JQuery預先加載圖像，並遇到了用jQuery預先加載圖像

現在有人可以告訴我，我是否必須以任何方式調用預加載的圖像？ 我假設這創建了一個img，然后瀏覽器對其進行了緩存（至少是針對該頁面），而我只是通過URI使用預加載的圖片？

有人可以在這里澄清嗎？

Answer 1

可以使用簡單的JavaScript行來預加載圖像：

new Image().src='image.png';

要預加載JavaScript文件，請使用JavaScript include_DOM技術並創建一個新的

<script>標記，如下所示：

var js = document.createElement('script'); js.src = 'mysftuff.js'; 
document.getElementsByTagName('head')[0].appendChild(js);

這是CSS版本：

var css  = document.createElement('link');
css.href = 'mystyle.css';
css.rel  = 'stylesheet';
document.getElementsByTagName('head')[0].appendChild(css);

在第一個示例中，該圖像是已請求但從未使用過的圖像，因此它不會影響當前頁面。 在第二個示例中，腳本被添加到頁面中，因此在下載腳本的同時將對其進行解析和執行。 CSS也是如此—它也將應用於頁面。 如果不希望這樣做，您仍然可以使用XMLHttpRequest預加載資產。

有關“ 使您的網站超快 ”的完整教程，請訪問我從許多網站和博客中精選的以下鏈接

用jQuery預加載圖像

Answer 2

您可以使用以下方法預加載所有圖像：

function loadImages(){
    var images = [
        'http://cdn.yourdomain.com/img/image1.png',
        'http://cdn.yourdomain.com/img/image2.jpg',
        'http://cdn.yourdomain.com/img/image3.jpg',
        'http://cdn.yourdomain.com/img/image4.jpg'
    ];
    $(images).each(function() {
        var image = $('<img />').attr('src', this);
    });
} 

Answer 3

我只使用CSS預加載了很多東西。 我不喜歡jQuery版本，因為您必須等待首先加載該庫，並且如果它們沒有啟用JS，或者jQuery被延遲，則它們在翻轉時會出現明顯的圖像更改延遲。

如果在圖像預加載完成后需要回調，請使用JS / jQuery。 否則，請使用CSS。

這只是使用:before一種方法，因此具有瀏覽器支持限制（<IE8）。 關於這一點的好處是您不需要任何額外的HTML標記。

HTML

<div class="logo"></div>

CSS

.logo {
    background:url(logo-1.png);
}

.logo:before {
    content: url(logo-2.png);
    width: 0;
    height: 0;
    visibility: hidden;
}

另一種方法是簡單地將背景圖像設置為頁面上的隱藏元素，其中包含需要預加載的圖像。

HTML

<div id="preload-logo-2"></div>

CSS

#preload-logo-2 {
    background: url(logo-2.png);
    height: 0;
    width: 0;
    visibility: hidden;
}

Answer 4

如果服務器設置了正確的緩存頭，則應該緩存圖像，並且您應該能夠僅使用URL並立即獲取圖像。