Wstępne ładowanie obrazów CSS

Question

Wstępne ładowanie obrazów CSS

Mam Ukryty formularz kontaktowy, który jest wdrażany klikając na przycisk. Jego pola są ustawione jako obrazy tła CSS i zawsze pojawiają się nieco później niż przełączony div.

Użyłem tego fragmentu w sekcji <head>, ale bez powodzenia (po wyczyszczeniu cache):

<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>

Używam jQuery jako mojej biblioteki, i byłoby fajnie, gdybym mógł go również użyć do uporządkowania tego problemu.

Dzięki za przemyślenia.

90

image css background preloader preload

Author: vsync, 2009-09-03

Source

12 answers

Wstępne ładowanie obrazów tylko za pomocą CSS

body::after{
    position:absolute; width:0; height:0; overflow:hidden; z-index:-1;
    content:url(img01.png) url(img02.png) url(img03.png) url(img04.png);
}

Demo

Lepiej użyć sprite image, aby zmniejszyć żądania http...
(jeśli istnieje wiele stosunkowo małych rozmiarów obrazów)

210

Author: vsync,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-11-04 15:37:36

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

Technika #1

Załaduj obraz na zwykły stan elementu, przesuń go tylko z położeniem tła. Następnie przesuń pozycję tła, aby wyświetlić ją po najechaniu kursorem.

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

Technika #2

Jeśli dany element ma już zastosowany obraz tła i musisz zmienić ten obraz, powyższe nie zadziała. Typowo wybrałbyś się tutaj na sprite (a połączony obraz tła) i po prostu przesuń pozycję tła. Ale jeśli to niemożliwe, spróbuj tego. Zastosuj obraz tła do innego elementu strony, który jest już używany, ale nie ma obrazu tła.

#random-unsuspecting-element { background: url(images/grass.png) no-repeat -9999px -9999px; }
#grass:hover { background: url(images/grass.png) no-repeat; }

13

Author: Fatih Hayrioğlu,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-12-29 10:44:55

Spróbuj z tym:

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

Za pomocą tego kodu wstępnie załadujesz obraz tła i wyrenderujesz formularz po załadowaniu

9

Author: mck89,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-09-03 12:51:35

Jeśli używasz ponownie tych obrazów bg gdziekolwiek indziej w witrynie do wprowadzania formularzy, prawdopodobnie chcesz użyć sprite ' a obrazu. W ten sposób można centralnie zarządzać obrazami (zamiast pic1, pic2, pic3 itp...).

Sprity są na ogół szybsze dla klienta, ponieważ żądają tylko jednego (choć nieco większego) pliku z serwera zamiast wielu plików. Zobacz artykuł, aby uzyskać więcej korzyści:

CSS image sprites

Z drugiej strony, to może nie bądź pomocny, jeśli używasz ich tylko do jednego formularza i naprawdę chcesz je załadować tylko wtedy, gdy użytkownik zażąda formularza kontaktowego...to może mieć sens.

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

5

Author: ajhit406,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 11:47:05

Wstępne ładowanie obrazów za pomocą znacznika HTML

Wierzę, że większość odwiedzających to pytanie szuka odpowiedzi "Jak mogę pobrać obraz przed rozpoczęciem renderowania strony?"{[11] } a najlepszym rozwiązaniem tego problemu jest użycie znacznika <link>, ponieważ znacznik <link> jest w stanie zablokować dalsze renderowanie strony. Zobacz też prewencyjny

Te dwie opcje wartości rel (związek między aktualnym dokumentem a powiązanym document ) atrybuty są najbardziej istotne z problemem:

prefetch: załaduj podany zasób podczas renderowania strony
preload: załaduj podany zasób przed rozpoczęciem renderowania strony

Więc jeśli chcesz załadować zasób ( w tym przypadku jest to obraz ) przed rozpoczęciem procesu renderowania tagu <body>, użyj:

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

I jeśli chcesz załadować zasób podczas renderowania <body>, ale planujesz go użyć później dynamicznie i nie chcę przeszkadzać użytkownikowi w czasie ładowania, użyj:

<link rel="prefetch" href="RESOURCE_URL">

5

Author: mertyildiran,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-01-22 07:43:13

Do wstępnego załadowania obrazów tła ustawionych za pomocą CSS, najbardziej efektywną odpowiedzią, jaką wymyśliłem, była zmodyfikowana wersja kodu, który nie działał:

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

Ogromną zaletą tego jest to, że nie trzeba go aktualizować, gdy wprowadzasz nowe obrazy tła w przyszłości, znajdzie nowe i wstępnie je załaduje!

4

Author: Deminetix,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-10-19 04:07:32

Co powiesz na załadowanie tego obrazu tła gdzieś ukrytego. W ten sposób zostanie załadowany po otwarciu strony i nie zajmie to czasu po utworzeniu formularza za pomocą ajax:

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

1

Author: Santi,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-09-03 12:52:58

Możesz użyć tej wtyczki jQuery waitForImage lub umieścić obrazy w ukrytym div lub (szerokość:0 i wysokość:0) i użyć zdarzenia onload na obrazach.

Jeśli masz tylko 2-3 obrazy, możesz powiązać zdarzenia i wyzwalać je w łańcuchu, więc po każdym obrazie możesz wykonać kod.

1

Author: alex.dominte,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-03-14 23:05:47

Gdy nie ma możliwości modyfikacji kodu CSS i wstępnego załadowania obrazów z regułami CSS dla pseudo elementów :before lub :after, można użyć innego podejścia z kodem JavaScript, który przemierza reguły CSS załadowanych arkuszy stylów. Aby to działało Skrypty powinny być dołączane po arkuszach stylów W HTML, na przykład przed zamknięciem znacznika body lub tuż po arkuszach stylów.

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
    });
});

1

Author: Ezze,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-10-28 19:19:43

Jeśli elementy strony i ich obrazy tła są już w DOM (tzn. nie tworzysz/nie zmieniasz ich dynamicznie), wtedy ich obrazy tła zostaną już załadowane. W tym momencie warto przyjrzeć się metodom kompresji:)

0

Author: ,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-09-03 12:45:02

Jedynym sposobem jest zakodowanie obrazu Base64 i umieszczenie go w kodzie HTML, aby nie musiał kontaktować się z serwerem, aby pobrać obraz.

To zakoduje obraz z adresu url, dzięki czemu możesz skopiować kod pliku obrazu i wstawić go na swoją stronę w ten sposób...

body {
  background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA...);
}

0

Author: mheager,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-11-11 03:33:06

score 23 · Accepted Answer

Mogę potwierdzić, że mój oryginalny kod wydaje się działać. Od niechcenia trzymałem się obrazu z niewłaściwą ścieżką.

Oto test: http://paragraphe.org/slidetoggletest/test.html

<script>
  pic = new Image();
  pic2 = new Image();
  pic3 = new Image();
    pic.src="images/inputs/input1.png";
    pic2.src="images/inputs/input2.png";
    pic3.src="images/inputs/input3.png";
</script>