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

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

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

<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 в качестве моей библиотеки, и было бы здорово, если бы я мог использовать его для организации этой проблемы.

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

Ответ 1

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

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

Ответ 2

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

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

Чтобы "трюк" сработал, мы будем использовать свойство content, которое позволяет удобно устанавливать несколько URL-адресов для загрузки, но, как показано, псевдоэлемент ::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
}

Demo

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

Ответ 3

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

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

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

prefetch: загрузить указанный ресурс при отображении страницы
preload: загрузить данный ресурс перед началом рендеринга страницы

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

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

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

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

Ответ 4

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

Ответ 5

попробуйте следующее:

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

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

Ответ 6

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

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

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

Ответ 7

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

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

CSS спрайты

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

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

Ответ 8

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

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

Ответ 9

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

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

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

Ответ 10

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

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

Ответ 11

Если нет способа изменить 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
    });
});

Ответ 12

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