118

버튼을 클릭하여 배포되는 숨겨진 연락처 양식이 있습니다. 해당 필드는 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를 내 라이브러리로 사용하고 있으며,이 문제를 정리하는데도 사용할 수 있다면 멋질 것입니다.

당신의 생각에 감사드립니다.

— 땅콩
소스

코드를 보여주세요. 이 양식을 어떻게 전환합니까?

— n1313

1

n1313, 저는 가능한 가장 간단한 방법을 사용합니다. $ ( '# toggle'). click (function () {$ ( '# contact'). slideToggle ();});

— Peanuts

257

CSS 만 사용하여 이미지 미리로드

아래 코드 body에서는 페이지에 존재하는 유일한 요소 중 하나이기 때문에 요소를 무작위로 선택하고 있습니다.

"트릭"이 작동하려면 여러 URL을로드 content할 수 있도록 편안하게 설정할 수 있는 속성을 사용해야합니다 . 그러나 표시된 것처럼 가상 요소는 숨겨진 상태로 유지 되므로 이미지가 렌더링되지 않습니다.::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
}

데모

스프라이트 이미지 를 사용하여 http 요청을 줄이고 (상대적으로 작은 크기의 이미지가 많은 경우) HTTP2 가 사용 되는 위치에서 이미지가 호스팅되는지 확인하는 것이 좋습니다 .

— vsync
소스

27

굉장합니다!

— Hengjie

4

단순함과 순수한 CSS 접근 방식에 대한 지금까지 최고의 기술! 유일한 단점은 이러한 이미지가 즉시 표시되는 콘텐츠와 동시에로드되고 기본 콘텐츠가로드 될 때까지 지연되지 않고 자바 스크립트가 필요하다는 것입니다. 그러나 수십 개의 이미지를 미리로드하지 않는 한 이것은 거래를 방해해서는 안됩니다.

— Benjamin

2

이것은 CSS 버튼 등에 대한 호버 애셋을 미리로드하는 데 환상적입니다. 그러면 애셋이로드되는 동안 버튼 위에있을 때 깜박임이 발생하지 않습니다.

— Robert Petz

16

좋은 솔루션입니다. body이 이미지는 스타일 시트를 참조하는 모든 페이지에로드되므로에 적용하지 않는 것이 좋습니다 . 대신, .contact_form:after {...}또는 덜 글로벌 한 다른 클래스 를 사용해야합니다 . 물론 모든 페이지에 귀하의 문의 양식이있는 경우를 제외하고;)

— CloudMagick

3

@vsync, 특히 gif 및 작은 재사용 가능 파일에 적합합니다. 내가 최근에 만난 상황은 콘텐츠가 풍부한 캐 러셀을위한 큰 bg 이미지 였고, 그 큰 파일이 모든 곳에로드되는 것을 확실히 원하지 않았습니다. :)

— CloudMagick

30

원래 코드가 작동하는지 확인할 수 있습니다. 나는 우연히 잘못된 길을 가진 이미지를 고수하고 있었다.

다음은 테스트입니다. 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>

— 땅콩
소스

CSS-ONLY와이 솔루션으로 몇 번의 테스트를 거친 후, 제 경우에는 특히 이것이 가장 좋은 솔루션입니다.

— zequinha-bsb 2011

감사합니다 그것의 가장 쉬운 모든 :)

— BetaCoder

4

답변의 URL이 더 이상 유효하지 않습니다.

— 브랜든 벅

안녕하세요, 해당 URL ( paragraphe.org/slidetoggletest/test.html ) 의 콘텐츠를 다시 업로드했습니다.이 내용 을 놓쳐서 죄송합니다. 건배,

— Peanuts

25

HTML <link> 태그를 사용하여 이미지 미리로드

이 질문의 방문자 대부분이 "페이지 렌더링이 시작되기 전에 이미지를 미리로드하려면 어떻게해야합니까?"라는 대답을 찾고 있다고 생각 합니다. 이 문제에 대한 최선의 해결책은 <link>태그를 사용하는 것입니다. 태그 <link>는 페이지의 추가 렌더링을 차단할 수 있기 때문 입니다. 선점 형 보기

rel( 현재 문서와 링크 된 문서 간의 관계 ) 속성 의 다음 두 가지 값 옵션은 문제와 가장 관련이 있습니다.

prefetch : 페이지를 렌더링하는 동안 주어진 리소스를로드합니다.
preload : 페이지 렌더링이 시작되기 전에 주어진 리소스를로드합니다.

따라서 태그 의 렌더링 프로세스가 시작 되기 전에 리소스 ( 이 경우 이미지 ) 를로드 <body>하려면 다음을 사용하세요.

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

<body>렌더링 하는 동안 리소스를로드하고 싶지만 나중에 동적으로 사용할 계획이고 로딩 시간으로 사용자를 괴롭 히고 싶지 않은 경우 다음을 사용합니다.

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

— 머티 일디 란
소스

Mozilla 브라우저 엔진은 API에 prefetch의해 결정되는 브라우저가 유휴 상태 일 때만로드된다는 점에 주목할 가치가 nsIWebProgressListener있습니다. 자세한 정보는 이것을 참조하십시오 .

— Matthew Beckman

1

나는 이것이 실제로 렌더링을 차단한다고 생각하지 않습니다. w3c.github.io/preload "예를 들어, 응용 프로그램은 preload 키워드를 사용하여 CSS 리소스의 초기, 높은 우선 순위 및 비 렌더링 차단 가져 오기를 시작할 수 있습니다. 적절한시기에 신청서에 적용되어야합니다. "

— Michael Crenshaw

1

@MichaelCrenshaw는 정확하고 렌더링을 차단 <link rel="preload">하지 않습니다 . 저자가 정의를 잘못 이해했다고 생각합니다. MDN 에서 rel = "preload" , "... 브라우저의 주요 렌더링 기계가 시작되기 전에 페이지 수명주기 초기에로드를 시작하려는 콘텐츠를 미리로드합니다 ." 아이디어는 리소스를 가능한 한 빨리 가져 와서 <img>요소가 렌더링 될 때와 같이 필요할 때 리소스를 사용할 수 있도록하는 것입니다 .

— MDMower

14

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

— 파티 하이 리오 글루
소스

4

항상 외부 링크의 내용을 제공하십시오. 그렇지 않으면 링크가 끊어지면 대답이 쓸모가 없습니다!

— sra

@Fatih +1은 아주 좋은 링크입니다. 3 가지 방법으로 연결된 기사의 최신 버전은 여기에 있습니다. perishablepress.com/3-ways-preload-images-css-javascript-ajax

— xmojmr 2014 년

@xmojmr 링크에 CSS 전용 솔루션이 없습니다.

— Max

10

이것을 시도하십시오 :

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

이 코드를 사용하면 배경 이미지를 미리로드하고로드 될 때 양식을 렌더링합니다.

— mck89
소스

mck89, 감사합니다. 하지만이 코드를 'head'또는 인라인 안에 사용해야합니까? html로 채워야하나요?

— Peanuts

머리에 사용해야합니다. $ (document) .ready 내부에서 사용할 수 있다고 생각합니다.

— mck89

6

CSS로 설정된 배경 이미지를 미리로드하는 경우 가장 효율적인 답변은 작동하지 않는 일부 코드의 수정 된 버전이었습니다.

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

이것의 큰 이점은 나중에 새로운 배경 이미지를 가져올 때 업데이트 할 필요가 없다는 것입니다. 새로운 배경 이미지를 찾아서 미리로드 할 수 있습니다!

— Deminetix
소스

각 이미지에 숨겨진 요소를 추가한다는 것을 올바르게 이해합니까? CSS 파일에서 이미지를 스캔 할 수있는 것이 아닙니다. :)

— bvdb

5

양식 입력을 위해 사이트의 다른 곳에서 이러한 bg 이미지를 재사용하는 경우 이미지 스프라이트를 사용하고 싶을 것입니다. 이렇게하면 이미지를 중앙에서 관리 할 수 있습니다 (pic1, pic2, pic3 등 ...).

스프라이트는 일반적으로 여러 파일 대신 서버에서 하나 (약간 더 큰) 파일 만 요청하기 때문에 클라이언트에서 더 빠릅니다. 더 많은 혜택은 SO 문서를 참조하십시오.

CSS 이미지 스프라이트

다시 말하지만, 하나의 양식에만 사용하고 사용자가 연락처 양식을 요청하는 경우에만로드하려는 경우에는 전혀 도움이되지 않을 수 있습니다.

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

— ajhit406
소스

예, CSS Sprites를 사용하면됩니다. 숨겨진 양식이 시작되기 전에 해당 스프라이트의 이미지 중 하나가 나타나는지 확인하십시오 (예 : 페이지로드시).

— Steve

1

숨겨진 어딘가에 배경 이미지를로드하는 것은 어떻습니까? 이렇게하면 페이지가 열릴 때로드되고 ajax를 사용하여 양식이 생성되면 시간이 걸리지 않습니다.

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

— 산티
소스

1

이 jQuery 플러그인 waitForImage를 사용 하거나 숨겨진 div 또는 (너비 : 0 및 높이 : 0)에 이미지를 넣고 이미지에 onload 이벤트를 사용할 수 있습니다.

2-3 개의 이미지 만있는 경우 이벤트를 바인딩하고 체인으로 트리거 할 수 있으므로 모든 이미지 후에 일부 코드를 수행 할 수 있습니다.

— user1236048
소스

1

유일한 방법은 이미지를 Base64로 인코딩하고 HTML 코드 내에 배치하여 이미지를 다운로드하기 위해 서버에 연결할 필요가 없도록하는 것입니다.

이것은 URL에서 이미지를 인코딩하므로 이미지 파일 코드를 복사하여 페이지에 삽입 할 수 있습니다.

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

— mheager
소스

2

CSS에서 동일한 이미지를 다시 사용하려면 ... 캐시되지 않으며 다시로드해야합니다.

— vsync 2013 년

1

CSS 코드를 수정하고 CSS 규칙 :before또는 :after의사 요소 를 사용하여 이미지를 미리로드 할 수있는 방법이없는 경우 로드 된 스타일 시트의 CSS 규칙을 통과하는 JavaScript 코드를 사용하는 또 다른 방법을 사용할 수 있습니다. 작동하도록하려면 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
    });
});

— ezze
소스

0

페이지 요소와 배경 이미지가 이미 DOM에있는 경우 (즉, 동적으로 생성 / 변경하지 않는 경우) 배경 이미지는 이미로드됩니다. 그 시점에서 압축 방법을 살펴볼 수 있습니다. :)

mmmm ... 좋은 지적 cpharmston, 이것이 캐시 된 이미지에서도 문제가 지속되는 이유를 설명합니다. 그래서, 그것은 workaraound가 없다는 것을 의미합니까?

— Peanuts

작은 이미지를 만드십시오! JPEG는 쉽게 압축되고 PNG 크기를 줄이는 명령 줄 도구 ( pmt.sourceforge.net/pngcrush )가 있으며 이미지의 색상 수를 줄여 GIF 크기를 줄일 수 있습니다. 물론 더 빠른 인터넷 서비스를 위해 봄도 할 수 있습니다;)

CSS 이미지 미리로드

CSS 만 사용하여 이미지 미리로드

데모

HTML <link> 태그를 사용하여 이미지 미리로드