Preloading CSS Images

2019-01-04 05:28发布

站内问答 / HTML/CSS
996 12 5

I have a hidden contact form which is deployed clicking on a button. Its fields are set as CSS background images, and they always appears a bit later than the div that have been toggled.

I was using this snippet in the <head> section, but with no luck (after I cleared the 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>

I'm using jQuery as my library, and it would be cool if I could use it as well for arranging this issue.

Thanks for your thoughs.

12条回答
乱世女痞
2楼-- · 2019-01-04 06:00

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

Technique #1

Load the image on the element's regular state, only shift it away with background position. Then move the background position to display it on hover.

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

Technique #2

If the element in question already has a background-image applied and you need to change that image, the above won't work. Typically you would go for a sprite here (a combined background image) and just shift the background position. But if that isn't possible, try this. Apply the background image to another page element that is already in use, but doesn't have a background image.

#random-unsuspecting-element { background: url(images/grass.png) no-repeat -9999px -9999px; }
#grass:hover { background: url(images/grass.png) no-repeat; }
查看更多
0人赞 添加讨论(0) 举报
地球回转人心会变
3楼-- · 2019-01-04 06:06

You could use this jQuery plugin waitForImage or you could put you images into an hidden div or (width:0 and height:0) and use onload event on images.

If you only have like 2-3 images you can bind events and trigger them in a chain so after every image you can do some code.

查看更多
0人赞 添加讨论(0) 举报
来，给爷笑一个
4楼-- · 2019-01-04 06:11

how about loading that background image somewhere hidden. That way it will be loaded when the page is opened and wont take any time once the form is created using ajax:

body {
background: #ffffff url('img_tree.png') no-repeat -100px -100px;
}
查看更多
0人赞 添加讨论(0) 举报
来，给爷笑一个
5楼-- · 2019-01-04 06:11

When there is no way to modify CSS code and preload images with CSS rules for :before or :after pseudo elements another approach with JavaScript code traversing CSS rules of loaded stylesheets can be used. In order to make it working scripts should be included after stylesheets in HTML, for example, before closing body tag or just after stylesheets.

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
    });
});
查看更多
0人赞 添加讨论(0) 举报
Emotional °昔
6楼-- · 2019-01-04 06:15

Preloading images using HTML <link> Tag

I believe most of the visitors of this question are looking for the answer of "How can I preload an image before the page's render starts?" and the best solution for this problem is using <link> tag because <link> tag is capable to block the further rendering of the page. See preemptive

These two value options of rel (relationship between the current document and the linked document) attribute are most relevant with the issue:

  • prefetch : load the given resource while page rendering
  • preload : load the given resource before page rendering starts

So if you want to load a resource (in this case it's an image) before the rendering process of <body> tag starts, use:

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

and if you want to load a resource while <body> is rendering but you are planning to use it later on dynamically and don't wanna bother the user with loading time, use:

<link rel="prefetch" href="RESOURCE_URL">
查看更多
0人赞 添加讨论(0) 举报
男人必须洒脱
7楼-- · 2019-01-04 06:15

For preloading background images set with CSS, the most efficient answer i came up with was a modified version of some code I found that did not work:

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

The massive benefit of this is that you don't need to update it when you bring in new background images in the future, it will find the new ones and preload them!

查看更多
0人赞 添加讨论(0) 举报
上一页 1 2
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)