Предварительная загрузка изображений CSS

у меня есть скрытая контактная форма, которая развертывается, нажав на кнопку. Его поля заданы как фоновые изображения CSS, и они всегда появляются немного позже, чем div, которые были переключены.

я использовал этот фрагмент в , но не повезло (после того как я очистил кэш) :

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

Я использую jQuery в качестве своей библиотеки, и было бы здорово, если бы я мог использовать его также для организации этой проблемы.

Спасибо за ваши мысли.

90
background css image preload preloader

12 ответов

предварительная загрузка изображений только с помощью 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);
}

демо

лучше использовать спрайт изображения для уменьшения HTTP-запросов...
(если есть много относительно небольших изображений)

210

Я могу подтвердить, что мой исходный код, кажется, работает. Я небрежно придерживался образа с неправильным путем.

вот тест: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>
23

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

Техника #1

загрузите изображение в обычное состояние элемента, только сдвиньте его с фоновой позиции. Затем переместите фоновое положение, чтобы отобразить его при наведении.

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

техника #2

если рассматриваемый элемент уже имеет фоновое изображение, и вам нужно изменить это изображение, вышеуказанное не будет работать. Обычно вы идете на спрайт здесь (комбинированное фоновое изображение) и просто сдвигаете фоновое положение. Но если это невозможно, попробуйте это. Применить фоновое изображение к другому элементу страницы, который уже используется, но не имеет фоновое изображение.

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

попробуйте с помощью этого:

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

С помощью этого кода Вы предварительно загружаете фоновое изображение и визуализируете форму при ее загрузке

9

Если вы повторно используете эти изображения bg где-либо еще на своем сайте для ввода формы, вы, вероятно, хотите использовать спрайт изображения. Таким образом, вы можете централизованно управлять своими изображениями (вместо pic1, pic2, pic3 и т. д...).

спрайты обычно быстрее для клиента, так как они запрашивают только один (хотя и немного больший) файл с сервера вместо нескольких файлов. См. статью SO для получения дополнительных преимуществ:

CSS-изображение спрайты!--6-->

опять же, это может быть совсем не полезно, если вы просто используете их для одной формы, и вы действительно хотите загрузить их, только если пользователь запрашивает контактную форму...может хоть смысла.

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

5

предварительная загрузка изображений с помощью HTML Tag

Я считаю, что большинство посетителей этого вопроса ищут ответ " как я могу предварительно загрузить изображение до начала рендеринга страницы?" и лучшим решением этой проблемы является использование <link> тег, потому что <link> тег способен блокировать дальнейшую визуализацию страницы. См.упреждающий

эти два варианта стоимостью rel (отношения между текущий документ и связанный документ) атрибут наиболее релевантны с вопросом:

  • prefetch: загрузите данный ресурс во время рендеринга страницы
  • поджатия: загрузите данный ресурс до начала рендеринга страницы

Итак, если вы хотите загрузить ресурс (в этом случае это изображение) перед процессом рендеринга <body> тег начинается, использовать:

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

и если вы хотите загрузить ресурс в то время как <body> рендеринг, но вы планируете использовать его позже динамически и не хотите беспокоить пользователя со временем загрузки, используйте:

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

для предварительной загрузки фоновых изображений, установленных с помощью CSS, наиболее эффективным ответом, который я придумал, была измененная версия некоторого кода, который я нашел, что не работал:

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

огромное преимущество этого заключается в том, что вам не нужно обновлять его, когда вы приносите новые фоновые изображения в будущем, он найдет новые и предварительно загрузите их!

4

Как насчет загрузки этого фонового изображения где-то скрыто. Таким образом, он будет загружен при открытии страницы и не займет много времени после создания формы с помощью ajax:

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

вы можете использовать этот плагин jQuery waitForImage или вы можете поместить изображения в скрытый div или (ширина: 0 и высота: 0) и использовать событие onload на изображениях.

Если у вас есть только 2-3 изображения, вы можете связывать события и запускать их в цепочке, чтобы после каждого изображения вы могли сделать некоторый код.

1

когда нет возможности изменить код CSS и предварительно загрузить изображения с правилами CSS для :before или :after псевдо-элементы можно использовать другой подход с JavaScript-кодом, пересекающим CSS-правила загруженных таблиц стилей. Для того, чтобы заставить его работать скрипты должны быть включены после таблиц стилей в HTML, например, перед закрытием body тег или сразу после таблиц стилей.

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

Если элементы страницы и их фоновые изображения уже находятся в DOM (т. е. вы не создаете/не изменяете их динамически), то их фоновые изображения уже будут загружены. В этот момент Вы можете посмотреть на методы сжатия:)

0

единственный способ-Base64 закодировать изображение и поместить его в HTML-код, чтобы ему не нужно было связываться с сервером для загрузки изображения.

этой будет кодировать изображение из url, чтобы вы могли скопировать код файла изображения и вставить его на свою страницу...

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