CSS Görüntülerini Önceden Yükleme

118

Bir düğmeye tıklayarak dağıtılan gizli bir iletişim formum var. Alanları CSS arka plan resimleri olarak ayarlanır ve her zaman geçişi yapılan div'den biraz sonra görünürler.

Bu pasajı <head>bölümde kullanıyordum ama şansım olmadı (önbelleği temizledikten sonra):

<script>
$(document).ready(function() {
        pic = new Image();
        pic2 = new Image();
        pic3 = new Image();
        pic.src="<?php bloginfo('template_directory'); ?>/images/inputs/input1.png";
        pic2.src="<?php bloginfo('template_directory'); ?>/images/inputs/input2.png";
        pic3.src="<?php bloginfo('template_directory'); ?>/images/inputs/input3.png";
});
</script>

Kitaplığım olarak jQuery kullanıyorum ve bu sorunu düzenlemek için de kullanabilirsem harika olur.

Düşünceleriniz için teşekkürler.

css  image  background  preloader  preload 
— Yer fıstığı
kaynak
Lütfen kodunuzu gösterin. Bu formu nasıl değiştirirsiniz?
— n1313
1
n1313, mümkün olan en basit yolu kullanıyorum: $ ('# geçiş'). click (function () {$ ('# kişi'). slideToggle ();});
— Peanuts

Yanıtlar:

258

Görüntüleri yalnızca CSS kullanarak önceden yükleme

Aşağıdaki kodda body, sayfada bulunması garanti edilen tek unsurdan biri olduğu için elementi rastgele seçiyorum .

"Hile" nin işe yaraması için, birden fazla URL'nin yüklenmesine contentrahatça izin veren özelliği kullanacağız , ancak gösterildiği gibi, sözde öğe gizli tutulur, böylece görüntüler oluşturulmaz:::after

body::after{
   position:absolute; width:0; height:0; overflow:hidden; z-index:-1; // hide images
   content:url(img1.png) url(img2.png) url(img3.gif) url(img4.jpg);   // load images
}

gösteri

http isteklerini azaltmak için bir hareketli görüntü kullanmak daha iyidir ... (çok sayıda nispeten küçük boyutlu görüntü varsa) ve görüntülerin HTTP2'nin kullanıldığı yerde barındırıldığından emin olun .

— vsync
kaynak
27
Bu harika!
— Hengjie
4
Sadeliği ve saf CSS yaklaşımı ile şimdiye kadarki en iyi teknik! Gerçekte tek dezavantajı, bu görüntülerin hemen görünür içerikle aynı anda yüklenmesi ve Javascript gerektirecek şekilde ana içerik yüklenene kadar gecikmemesidir. Ancak düzinelerce görüntüyü önceden yüklemediğiniz sürece, bu bir anlaşma kırıcı olmamalıdır.
— Benjamin
2
Bu CSS düğmeleri ve için vurgulu varlıklarını önceden yükleme için harika böyle - Herhangi bir titreşimi alamadım bu şekilde sizi üzerine düğmenin üzerine ise varlıklar yük
— Robert Petz
16
Güzel çözüm. bodyYine de, bu görüntüler stil sayfasına başvuran her sayfaya yükleneceğinden, bunu uygulamamanızı tavsiye ederim . Bunun yerine, .contact_form:after {...}veya daha az küresel olan başka bir sınıf kullanmalısınız . Elbette iletişim formunuz her sayfada olmadığı sürece;)
— CloudMagick
3
@vsync, özellikle gifler ve küçük yeniden kullanılabilirler için mantıklı. Son zamanlarda karşılaştığım durum, zengin içerikli bir atlıkarınca için büyük bg resimler içindi ve bu büyük dosyaların her yere yüklenmesini kesinlikle istemedim :)
— CloudMagick
30

Orijinal kodumun çalıştığını doğrulayabilirim. Yanlış bir yoldan rastgele bir imaja yapışıyordum.

İşte bir test: http://paragraphe.org/slidetoggletest/test.html

<script>
    var pic = new Image();
    var pic2 = new Image();
    var pic3 = new Image();
    pic.src="images/inputs/input1.png";
    pic2.src="images/inputs/input2.png";
    pic3.src="images/inputs/input3.png";
</script>
— Yer fıstığı
kaynak
SADECE CSS ile yapılan birkaç testten sonra ve bu çözüm, özellikle benim durumumda, bu en iyisidir.
— zequinha-bsb
Teşekkürler, En
— Kolayı
4
Yanıttaki URL artık geçerli değil.
— Brandon Buck
Merhaba, bu URL'deki içeriği yeniden yükledim ( paragraphe.org/slidetoggletest/test.html ), bunu kaçırdığım için üzgünüm. Şerefe,
— Peanuts
25

HTML <link> Etiketi kullanarak görüntüleri önceden yükleme

Bu sorunun ziyaretçilerinin çoğunun "Sayfanın işlenmesi başlamadan önce bir resmi nasıl önceden yükleyebilirim?" Yanıtını aradığına inanıyorum. ve bu sorun için en iyi çözüm, <link>etiket kullanmaktır çünkü <link>etiket, sayfanın daha fazla oluşturulmasını engelleyebilir. Önleyici bakın

rel( Mevcut belge ile bağlantılı belge arasındaki ilişki ) özniteliğinin bu iki değer seçeneği , en çok sorunla ilgilidir:

  • önceden getirme : sayfa oluştururken verilen kaynağı yükle
  • önyükleme : verilen kaynağı sayfa oluşturma başlamadan önce yükleyin

Dolayısıyla , etiket oluşturma işlemi başlamadan önce bir kaynak ( bu durumda bir görüntüdür ) yüklemek istiyorsanız <body>, şunu kullanın:

<link rel="preload" as="image" href="IMAGE_URL">

ve <body>işleme sırasında bir kaynak yüklemek istiyorsanız, ancak daha sonra dinamik olarak kullanmayı planlıyorsanız ve kullanıcıyı yükleme süresiyle rahatsız etmek istemiyorsanız, şunu kullanın:

<link rel="prefetch" href="RESOURCE_URL">
— mertyildiran
kaynak
Mozilla tarayıcı motorunun yalnızca prefetchtarayıcı boştayken yükleneceğini ve bu nsIWebProgressListenerAPI tarafından belirlenir . Bkz bu daha fazla bilgi için.
— Matthew Beckman
1
Bunun aslında oluşturmayı engellediğini sanmıyorum: w3c.github.io/preload "Örneğin, uygulama önceden, yüksek öncelikli ve oluşturmayı engellemeyen bir CSS kaynağının getirilmesini başlatmak için preload anahtar sözcüğünü kullanabilir ve uygun zamanda uygulama tarafından başvurulabilir "
— Michael Crenshaw
1
@MichaelCrenshaw doğrudur, <link rel="preload">yok değil oluşturmayı engellemek, ben yazar tanımını yanlış inanıyoruz. MDN itibaren rel = "ön gerilimli" ile Önceden yükleme içeriği "bölümünde, tarayıcıların ana render makine tekmeler önce erken sayfa yaşam döngüsü içinde yükleme başlamak istiyorum ...." Buradaki fikir, kaynakların mümkün olan en kısa sürede getirilmesidir, bu da kaynağın ihtiyaç duyulduğunda, örneğin bir <img>öğe oluşturulduğunda kullanılabilir olmasını daha olası hale getirir .
— MDMower
14

http://css-tricks.com/snippets/css/css-only-image-preloading/

Teknik # 1

Görüntüyü öğenin normal durumuna yükleyin, yalnızca arka plan konumu ile uzaklaştırın. Ardından fareyle üzerine gelindiğinde görüntülemek için arka plan konumunu hareket ettirin.

#grass { background: url(images/grass.png) no-repeat -9999px -9999px; }
#grass:hover { background-position: bottom left; }

Teknik # 2

Söz konusu öğeye zaten uygulanmış bir arka plan resmi varsa ve bu resmi değiştirmeniz gerekiyorsa, yukarıdakiler çalışmayacaktır. Tipik olarak burada bir sprite (birleşik bir arka plan görüntüsü) seçersiniz ve sadece arka plan konumunu değiştirirsiniz. Ancak bu mümkün değilse, bunu deneyin. Arka plan resmini halihazırda kullanımda olan ancak bir arka plan resmi olmayan başka bir sayfa öğesine uygulayın.

#random-unsuspecting-element { background: url(images/grass.png) no-repeat -9999px -9999px; }
#grass:hover { background: url(images/grass.png) no-repeat; }
— Fatih Hayrioğlu
kaynak
4
Daima harici bağlantıların içeriğini sağlayın. Aksi takdirde, bağlantı koparsa cevabınız değersizdir!
— sra
@Fatih +1 çok iyi bağlantı için. Bağlantılı makalenin 3 farklı yolla daha güncel sürümü burada perishablepress.com/3-ways-preload-images-css-javascript-ajax
— xmojmr
@xmojmr Bağlantınızda yalnızca CSS çözümleri yok.
— Maksimum
10

bununla dene:

var c=new Image("Path to the background image");
c.onload=function(){
   //render the form
}

Bu kodla, arka plan resmini önceden yükler ve yüklendiğinde formu oluşturursunuz

— mck89
kaynak
mck89, teşekkürler, bu oldukça iyi görünüyor. Ancak bu kodu 'başlık' içinde mi yoksa satır içi olarak mı kullanmalıyım? Demek istediğim, html ile doldurmalı mıyım?
— Peanuts
Bunu kafanın içinde kullanmalısın. $ (Document) .ready
— mck89
6

CSS ile ayarlanmış arka plan resimlerini önceden yüklemek için bulduğum en etkili cevap, çalışmadığını bulduğum bazı kodların değiştirilmiş bir versiyonuydu:

$(':hidden').each(function() {
  var backgroundImage = $(this).css("background-image");
  if (backgroundImage != 'none') {
    tempImage = new Image();
    tempImage.src = backgroundImage;
  }
});

Bunun büyük yararı, gelecekte yeni arka plan görüntüleri getirdiğinizde güncellemenize gerek kalmaması, yenilerini bulup önceden yükleyebilmesidir!

— Deminetix
kaynak
Her görüntü için gizli bir öğe eklemenizi doğru anlıyor muyum? CSS dosyanızı resimler için tarayabileceğinden değil mi? :)
— bvdb
5

Bu bg resimlerini sitenizde başka herhangi bir yerde form girdileri için yeniden kullanıyorsanız, muhtemelen bir resim hareketli grafiği kullanmak istersiniz. Bu şekilde resimlerinizi merkezi olarak yönetebilirsiniz (pic1, pic2, pic3, vb. Yerine).

Sprite'lar genellikle istemci için daha hızlıdır, çünkü birden çok dosya yerine sunucudan yalnızca bir dosya (biraz daha büyük olsa da) isterler. Daha fazla avantaj için SO makalesine bakın:

CSS resim sprite

Daha sonra, bunları yalnızca bir form için kullanıyorsanız ve gerçekten yalnızca kullanıcı iletişim formunu isterse yüklemek istiyorsanız, bu hiç yardımcı olmayabilir ... yine de mantıklı olabilir.

http://www.alistapart.com/articles/sprites

— ajhit406
kaynak
Evet, CSS Sprite'lar gitmenin yoludur. Gizli form başlatılmadan önce (sayfa yükleme gibi) bu hareketli grafikteki resimlerden birinin göründüğünden emin olun.
— Steve
1

o arka plan resmini gizli bir yere yüklemeye ne dersiniz? Bu şekilde sayfa açıldığında yüklenecek ve ajax kullanılarak form oluşturulduktan sonra herhangi bir zaman almayacaktır:

body {
background: #ffffff url('img_tree.png') no-repeat -100px -100px;
}
— Santi
kaynak
1

Bu jQuery eklentisini waitForImage'ı kullanabilir veya görüntüleri gizli bir div veya (genişlik: 0 ve yükseklik: 0) içine koyabilir ve görüntüler üzerinde onload olayını kullanabilirsiniz.

Yalnızca 2-3 görüntünüz varsa, olayları bağlayabilir ve bir zincir halinde tetikleyebilirsiniz, böylece her görüntüden sonra biraz kod yapabilirsiniz.

— user1236048
kaynak
1

Tek yol Base64'ün görüntüyü kodlaması ve HTML kodunun içine yerleştirmesidir, böylece görüntüyü indirmek için sunucuyla iletişime geçmesine gerek kalmaz.

Bu , url'deki bir resmi kodlar, böylece resim dosyası kodunu kopyalayabilir ve sayfanıza bu şekilde ekleyebilirsiniz ...

body {
  background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA...);
}
— mheager
kaynak
2
Aynı resmi CSS'nizde tekrar kullanmak isterseniz ... önbelleğe alınmaz ve yeniden yüklemeniz gerekir.
— vsync
1

CSS kodunu değiştirmenin ve görüntüleri CSS kurallarıyla :beforeveya :aftersözde öğelerle önceden yüklemenin bir yolu olmadığında, JavaScript kodunun, yüklenen stil sayfalarının CSS kurallarını tarayarak geçtiği başka bir yaklaşım kullanılabilir. Çalışmasını sağlamak için, komut dosyalarının HTML'deki stil sayfalarından sonra , örneğin bodyetiketin kapanmasından önce veya stil sayfalarının hemen ardından eklenmesi gerekir .

getUrls() {
    const urlRegExp = /url\(('|")?([^'"()]+)('|")\)?/;

    let urls = [];
    for (let i = 0; i < document.styleSheets.length; i++) {
        let cssRules = document.styleSheets[i].cssRules;
        for (let j = 0; j < cssRules.length; j++) {
            let cssRule = cssRules[j];
            if (!cssRule.selectorText) {
                continue;
            }

            for (let k = 0; k < cssRule.style.length; k++) {
                let property = cssRule.style[k],
                    urlMatch = cssRule.style[property].match(urlRegExp);
                if (urlMatch !== null) {
                    urls.push(urlMatch[2]);
                }
            }
        }
    }
    return urls;
}

preloadImages() {
    return new Promise(resolve => {
        let urls = getUrls(),
            loadedCount = 0;

        const onImageLoad = () => {
            loadedCount++;
            if (urls.length === loadedCount) {
                resolve();
            }
        };

        for (var i = 0; i < urls.length; i++) {
            let image = new Image();
            image.src = urls[i];
            image.onload = onImageLoad;
        }
    });
}

document.addEventListener('DOMContentLoaded', () => {
    preloadImages().then(() => {
        // CSS images are loaded here
    });
});
— Ezze
kaynak
0

Sayfa öğeleri ve arka plan resimleri zaten DOM'deyse (yani, onları dinamik olarak oluşturmuyor / değiştirmiyorsanız), arka plan resimleri zaten yüklenir. Bu noktada, sıkıştırma yöntemlerine bakmak isteyebilirsiniz :)

mmmm ... iyi nokta cpharmston, ve bu, önbelleğe alınan resimler olsa bile sorunun neden devam ettiğini açıklıyor. Yani bu, geçici çözüm olmadığı anlamına mı geliyor?
— Peanuts
Daha küçük resimler oluşturun! JPEG'ler kolayca sıkıştırılır, PNG'lerin boyutunu küçültmek için komut satırı araçları vardır ( pmt.sourceforge.net/pngcrush ) ve GIF'lerin boyutunu azaltmak için görüntüdeki renk sayısını azaltabilirsiniz. Tabii ki, daha hızlı internet hizmeti için de
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.