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

Question

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

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

1383 12

css image background preloader

12 ответов:

Comments

Ничего не найдено.

vsync · Accepted Answer · 2016-11-04 17:37:36

предварительная загрузка изображений с использованием только 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-запросов...
(если есть много относительно небольших изображений)

Peanuts · Accepted Answer · 2014-01-15 14:19:56

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

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

Fatih Hayrioğlu · Accepted Answer · 2011-12-29 12:44:55

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

mck89 · Accepted Answer · 2009-09-03 15:51:35

попробуйте с помощью этого:
var c=new Image("Path to the background image");
c.onload=function(){
   //render the form
}
С помощью этого кода Вы предварительно загружаете фоновое изображение и визуализируете форму, когда она загружена

ajhit406 · Accepted Answer · 2017-05-23 14:47:05

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

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

изображение CSS спрайты

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

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

mertyildiran · Accepted Answer · 2017-01-22 09:43:13

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

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

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

prefetch: загрузить данный ресурс во время рендеринга страницы

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

так что если вы хотите загрузить ресурс (в данном случае это картинка) перед процессом рендеринга <body> тег начинается, использование:
<link rel="preload" as="image" href="IMAGE_URL">
и если вы хотите загрузить ресурс в то время как <body> рендеринг, но вы планируете использовать его позже динамически и не хотите беспокоить пользователя со временем загрузки, используйте:
<link rel="prefetch" href="RESOURCE_URL">

Deminetix · Accepted Answer · 2012-10-19 07:07:32

для предварительной загрузки фоновых изображений, установленных с помощью CSS, наиболее эффективным ответом, который я придумал, была модифицированная версия некоторого кода, который я нашел, который не работал:
$(':hidden').each(function() {
  var backgroundImage = $(this).css("background-image");
  if (backgroundImage != 'none') {
    tempImage = new Image();
    tempImage.src = backgroundImage;
  }
});
огромное преимущество этого заключается в том, что вам не нужно обновлять его, когда вы приносите новые фоновые изображения в будущем, он найдет новые и предварительно загрузит их!

Santi · Accepted Answer · 2009-09-03 15:52:58

Как насчет загрузки этого фонового изображения где-то скрыто. Таким образом, он будет загружен при открытии страницы и не займет много времени после создания формы с помощью ajax:
body {
background: #ffffff url('img_tree.png') no-repeat -100px -100px;
}

alex.dominte · Accepted Answer · 2012-03-15 01:05:47

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

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

Ezze · Accepted Answer · 2016-10-28 22:19:43

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

score 0 · Accepted Answer · 2009-09-03 15:45:02

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

mheager · Accepted Answer · 2012-11-11 05:33:06

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

этой будет кодировать изображение из url, так что вы можете скопировать код файла изображения и вставить его на своей странице, Как так...
body {
  background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA...);
}