css : 처음 깜박일 때 이미지 호버링 방지

css : 처음 깜박일 때 이미지 호버링 방지

---

class-btn포함 된 클래스로 마우스를 가져 가면 배경 이미지를 변경하는 앵커 가 있습니다 background-image.

마우스를 가져 가면

a.class-btn:hover
{
    background-image('path/to/image-hovered.jpg');
}

페이지가 처음로드되고이 버튼을 처음으로 가리키면 깜박입니다 (마우스로 이동 한 이미지를 다운로드하는 데 약 0.5 초 소요). JavaScript없이 깜박임을 피하는 방법 (단순한 CSS 및 HTML 만 허용됨)?

비슷한 질문에 대해 Stack Overflow를 검색했지만 운이 없었습니다.

방금 추가 :

• 호버 된 이미지를 "사전로드"해야합니까? 어떻게?
• Z- 인덱스 또는 불투명도로 플레이해야합니까?

모든 브라우저에서 발생하므로 솔루션은 모든 브라우저에서 작동합니다.

---

다음은 내가 여러 번 사용한 간단하고 효과적인 CSS 이미지 미리로드 기술입니다. 콘텐츠를 배치하여 여러 이미지를로드 할 수 있습니다. url () url () url () ... 등.

body:after{
 display:none;
 content: url(path/to/image-hovered.jpg) url(path/to/another-image-hovered.jpg);
}

---

이것을 피하는 가장 쉬운 방법은 이미지 스프라이트를 사용하는 것입니다. 좋은 개요를 보려면 이 CSS 트릭 기사를 확인 하십시오 .

이렇게하면 현재보고있는 깜박임 문제를 해결할뿐만 아니라 HTTP 요청 수도 줄일 수 있습니다. CSS는 다음과 같습니다.

a.class-btn { background: url('path/to/image.jpg') 0 0 no-repeat; }
a.class-btn:hover { background-position: 0 -40px; }

세부 사항은 이미지에 따라 다릅니다. 온라인 스프라이트 생성기 를 사용하여 프로세스를 더 쉽게 만들 수도 있습니다.

---

내가 사용하는 간단한 트릭은 원래 배경 이미지를 두 배로 늘리고 마우스를 올려 놓은 이미지를 먼저 배치하는 것입니다.

.next {
  background: url(../images/next-hover.png) center center no-repeat;
  background: url(../images/next.png) center center no-repeat;
    &:hover{
      background: url(../images/next-hover.png) center center no-repeat;
    }
 }

성능 저하가없고 매우 간단합니다.

또는 아직 SCSS를 사용하지 않는 경우 :

.next {
  background: url(../images/next-hover.png) center center no-repeat;
  background: url(../images/next.png) center center no-repeat;        
 }
 .next:hover{
  background: url(../images/next-hover.png) center center no-repeat;
 }

---

이렇게하면 :

#the-button {
background-image: url('images/img.gif');
}
#the-button:before {
  content: url('images/animated-img.gif');
  width:0;
  height:0;
  visibility:hidden;
}

#the-button:hover {
  background-image: url('images/animated-img.gif');
}

이것은 정말 도움이 될 것입니다!

여길 봐:

http://particle-in-a-box.com/blog-post/pre-load-hover-images-css-only

추신-내 작업이 아니라 내가 찾은 해결책 :)

---

이것은 비 CSS 솔루션입니다. hover 이미지가 하나의 디렉토리에 있고 공통 명명 규칙 (예 : 하위 문자열 '-on.'포함)이있는 경우 파일 이름을 선택하여 HTML에 넣을 수 있습니다. 일련의:

<img src='...' style='display: none' />

---

@Kristian의 숨겨진 'content : url ()'적용 방법은 본문이 Firefox 48.0 (OS X)에서 작동하지 않는 것 같습니다.

그러나 "display : none;"변경 다음과 같이 :

body:after {
 position: absolute; overflow: hidden; left: -50000px;
 content: url(/path/to/picture-1.jpg) url(/path/to/picture-2.jpg);
}

... 나를 위해 트릭을했습니다. Firefox가 숨겨진 이미지를로드하지 않거나 렌더링 (?)과 관련이있을 수 있습니다.

---

크기가 같은 경우 한 가지 가능성은 :hover상단 이미지에 대한 CSS 클래스 를 사용하여 두 이미지를 서로 위에 직접 그리는 것입니다.display: none;

이렇게하면 두 이미지가 모두 미리로드되지만 마우스를 올리면 두 번째 이미지가 표시됩니다.

---

이미지를 미리로드 할 수 있습니다.

function preloadImages(srcs, imgs, callback) {
var img;
var remaining = srcs.length;
for (var i = 0; i < srcs.length; i++) {
    img = new Image();
    img.onload = function() {
        --remaining;
        if (remaining <= 0) {
            callback();
        }
    };
    img.src = srcs[i];
    imgs.push(img);
}
}
// then to call it, you would use this
var imageSrcs = ["src1", "src2", "src3", "src4"];
var images = [];
preloadImages(imageSrcs, images, myFunction);

---

The "double up the original background image" trick didn't work for me so I used another css trick:

.next {
    background: url(../images/next.png) center center no-repeat;        
}
.next:hover {
    background: url(../images/next-hover.png) center center no-repeat;
}
.next:after {
    content: url(../images/next-hover.png);
    display: none;
}

---

This technique works nicely for me and ensures not only is the hover image pre-loaded, but it's also ready and waiting to be displayed. (Most other solutions rely on switching the background image on hover, which just seems to take the browser a bit of time to figure out, however much the image is pre-loaded.)

Create :before and :after pseudo elements on the container with the two images, but hide the one you want to see on hover. Then, on hover, switch the visibility.

So long as they both share the same size and positioning rules, you should see a neat swap.

.image-container {
    &:before { display: block; background-image: url(uncovered.png); }
    &:after { display: none; background-image: url(uncovered.png); }
}
.image-container:hover {
    &:before { display: none; }
    &:after { display: block; }
}

---

Just change the size of the background image, instead of the source of it! So...

a.class-btn {
    background-image: url('path/to/image-hovered.jpg');
    background-size: 0;
}
a.class-btn:hover {
    background-size: auto;
}

---

The best way to do this is to just insert the images onto the webpage and set display to none.

참고URL : https://stackoverflow.com/questions/13286745/css-avoid-image-hover-first-time-blinking