2012-10-26 2 views
1

나는 일반적으로 모호한 질문에 대해 미리 사과하지만 최근에 내 마음에 들었습니다.가장 빠른 결과를 얻으려고 호버링하기위한 최적의 방법은 무엇입니까? - CSS, jQuery

현재 이미지 위에 마우스를 올려 놓을 때 몇 개의 버튼을 사용합니다. 일부는 미묘하고 배경색이 바뀌고 일부는 CSS 가상 클래스가 전체 이미지를 가리키고 어떤 것은 jQuery 호버 메소드를 사용합니다. 어떤 것들은 다른 전술을 필요로합니다. 그러나 이것들을 전체적으로 검토 할 때, 나는 일관된 방법을 사용하지 않았던 것 같습니다.

제 질문은 페이지를 가장 빠르고 일관성있게 만들기 위해 일반적으로 가장 좋은 방법은 무엇입니까? OK 일을해도 CSS 파일에서 이미지를 많이 호출하는 것은 좋지 않은 것 같습니다. 어쩌면 내가 틀렸어.

그러나 아직 jQuery 스크립트가 많이 실행되는 경우에는 반대되는 것으로 보입니다. 다른 사이트를 보면 <head>에서 실행되는 스크립트가 아닌 *.js 개의 파일이있는 것으로 보입니다. 예를 들어, 현재, 대부분의 jQuery 스크립트가있는 헤더 파일이 있습니다. 나는 항상이 스크립트들을 <head> 태그 안에 보관하도록 가르쳐 졌기 때문에 나는 이것을한다. 예를 들어, 가독성을 높이기 위해 스크립트를 HTML 코드에 더 가깝게 추가하는 것이 더 좋습니까?

JavaScript를 자체 파일로 이동해야하며 <head>에있는 파일을 포함해야합니까? 내 페이지는 비교적 잘 작동하지만이 현상에 대한 프레임 워크가 있다고 성공적으로 말할 수는 없습니다. 나는 이러한 페이지를 리팩터링하기 전에 이런 종류의 작업에 대한 전략을 개선하려고 노력 중이다.

미리 알려 주셔서 감사합니다.

+0

사용 CSS를 그 유혹 버튼에 가능한 때마다. – Caelea

+0

의견을 주셔서 감사합니다. 버튼을 가리키고 들어오고 나가기를 원한다면 어떨까요? 나는 이것을 위해 보통 jQuery를 사용했다. – nicorellius

+0

ups, 나쁘다, corect 링크는 http://www.webdesignerdepot.com/2010/01/css-transitions-101/이며, 그 링크는 내 클립 보드에 남아있다. 죄송합니다. – Caelea

답변

2

머리 속에 js 파일을 포함하지 마십시오. RequireJS 또는 head.js를 사용하여 js 파일을 비동기 적으로로드하십시오.

후버에 CSS 만 사용하고 모든 이미지를 스프라이트에 병합하면 페이지로드가 빨라집니다.

+1

나는 머리와 함께 끝났다. js. 그것은 위대하다. 그런 다음 서버에서 캐싱을 활성화하고 유사한 이미지에서 여러 스프라이트를 작성했습니다. 성능의 향상은 이미 눈에.니다. 감사. – nicorellius

1

브라우저가 캐시 할 수 있기 때문에 일반적인 기능을 별도의 .js 파일에 넣어야합니다. 대신 동일한 js 함수를 각 HTML 파일에 잘라 붙이기하면 브라우저는 모든 페이지와 함께 다운로드해야합니다 (적어도 첫 번째로드시). 또한 분명히 이 될 것입니다. 유지하기가 훨씬 수월합니다.!

css 어디에서나 사용자가 JavaScript를 사용할 수 없을 때 작동하기 때문에 (브라우저가 실제로 모든 최신 CSS 기능을 실제로 구현한다고 가정하기 때문에) 가능할 수도 있습니다.

+0

좋은 지적입니다.나는 거기에뿐만 아니라 noscript 파일을 가지고, JS가 diabled 때, 그래서 JS가 비활성화되어 있다면 버튼이 작동면 좋을거야. 감사. – nicorellius

1

css도 사용하여 페이딩 효과를 만들 수 있습니다. 배경색이 다른 이미지를 사용하는 경우 이미지를 사용하지 마십시오. CSS를 사용하여 호버에서 좋은 배경색과 효과를 얻을 수 있습니다.

<ul class="nav-fade"> 
    <li>Home</li> 
    <li>Tutorials</li> 
    <li>Articles</li> 
</ul> 

CSS는이 메뉴를

.nav-fade li { 
    background: #fff; 
    padding: 3px 8px; 
    display: inline-block; 
    transition: background .25s ease-in-out; 
    -moz-transition: background .25s ease-in-out; 
    -webkit-transition: background .25s ease-in-out; 
    } 

    .nav-fade li:hover { 
     background: #ddd; 
     } 

SRC를 페이드 : http://bavotasan.com/2011/a-simple-fade-with-css3/