Front-End/jQuery

jQuery img 경로 오류 시 대체 이미지 설정하기 (엑박 방지)

img 태그 엑박 방지하기Javascript 2011/11/30 15:55 html 이벤트중에 onError를 이용하면 엑박을 방지할 수 있다. onError는 윈도우나 이미지등 개체의 읽기 오류가 발생되면 이벤트 발생[출처] window.onerror 이벤트 - 윈도우나 이미지등 개체의 읽기 오류가 발생되면 이벤트 발생|작성자 밍밍한다. 위처럼 사용하면 이미지를 찾지 못할 경우 대체할 이미지로 화면에 뿌려주게 된다. jQuery로도 가능하다. $().ready(function(){ $('img).each(function(n){ $(this).error(function(){ $(this).attr('src', '대체할 이미지'); }); }); }); 간단한듯하나 테스트해보지 못했다. 원본 페이지: ht..

jQuery ready(fn) vs load(fn)

안녕하세요 TODD입니다. 오늘은 jQuery API 중에서 ready(fn)와 load(fn)에 대해서 알아보려고 합니다. 기존에 javascript로 구현된 페이지를 보면 페이지가 load 되었을때 해당 스크립트를 실행하기위해 태그에 onload를 함수를 사용하는 코드를 종종 볼 수 있습니다. ready(fn)와 load(fn)는 와 비슷한 행동을 한다고 볼 수 있습니다. 다만 약간의 차이가 존재하긴 합니다. 차이를 알아보기에 앞서 간단하게 ready(fn)와 load(fn)에 대해서 살펴보면 다음과 같습니다. 1. ready(fn) - DOM element들이 load가 완료된 시점에 callback function을 실행합니다. 2. load(fn) - 전체 문서의 내용이 load가 완료된 후 c..

ready와 load 이벤트차이

$(document).ready(function(){  // code});브라우저에서 DOM 트리를 생성하고난 후에 실행되게 되는 코드입니다.(DOM is ready)$(window).load(function(){  // code}); 모든 include 되는 프레임들과 object들, 이미지까지 로드된 이후에 실행됩니다.document가 ready된 시점에는 DOM에 대한 접근만이 자유롭겠지만아직 브라우저에서 다른 객체들이나 이미지들을 로드하지 않은 상황이므로어떤 페이지를 사용자가 접근할 때 이미지에 대한 가공을 하려한다면 실패하게 되겠죠.하지만, window를 로드하고난 이후에 실행되는 코드들은모든 객체나 프레임들(외부 contents를 담는 프레임까지), 이미지까지 모두 로드한 이후에 실행되므로do..

javascript, jQuery로 페이지 스크롤 끝 확인

ajax를 통해서 스크롤이 페이지 끝에 도착 했을 때자동으로 로딩되는 페이지가 많은데, 스크롤이 페이지에 끝에 도착한 것을 다음과 같은 자바스크립트 구문으로 확인가능 합니다. 바디 태그에 onscroll=scrollEnd();를 붙여주면 스크롤 하면서 scrollEnd();를 통해스크롤이 화면 끝에 도달했는지를 확인 할 수 있습니다. 이것은 jQuery에서 $.scroll();을 통해 구현이 가능한데요. 다음과 같은 소스로 구현가능합니다. javascript로 구현한 코드를 jQuery를 통해 훨씬 더 간단히 구현 가능합니다:) ===================================================================================================..

JQuery Mobile 44. 로딩 메세지 켜기/끄기

http://cafe.naver.com/dflashcafe/406-------------------------------------------------------------------------------------JQuery Mobile 에서의 로딩 메세지를 사용자 제어로 켜고 끄는 방법입니다. showPageLoadingMsg(), hidePageLoadingMsg() 가 존재합니다.showPageLoadingMag() 는 로딩메세지를 보여주고,hidePageLoadingMsg() 는 로딩메세지를 숨겨줍니다. 아래는 두 버튼으로 위 메서드를 사용한 내용입니다. 적용된 화면은 아래와 같습니다. showPageLoadingMsg() 메서드가 실행된 화면입니다.로딩 메세지가 표시되었습니다. 로딩메세지가 ..

이벤트

jQuery Mobile offers several custom events that build upon native events to create useful hooks for development. Note that these events employ various touch, mouse, and window events, depending on event existence, so you can bind to them for use in both handheld and desktop environments. You can bind to these events like you would with other jQuery events, using live() or bind().Important: Use $..

changePage() : 페이지 변경 메소드 (location.href)

출처 : http://cafe.naver.com/webappdev/1561 -----------------------------------------------------------------ex) $.mobile.changePage("#subpage","flip", false, true);주제 : 참고 : http://jquerymobile.com/demos/1.0a2/#docs/api/methods.html 내용 : - 프로그래밍적으로 페이지 변경을 하고 싶은경우~ changePage() 메소드를 사용하면 된답니다. - 방법은? /* changePoage - 파라메터 - to : 이동페이지 - transition : 이동효과 - back : back button 클릭시 이전페이지 이동여부.(defau..

이벤트 Bind, Live, Delegate 차이

출처 : http://hhjae84.blog.me/90137974750 Bind, Live, Delegate 에 대한 설명입니다.3가지 모두 이벤트에 관련된 메서드입니다. 아래와 같이 테스트를 위한 코드를 작성하였습니다.bind, live, delegate 는 각각 따로 주석처리하여 실행해주세요. 우선 bind 입니다.클릭시 clone() 함수를 통해 같은것을 복사하고 appendTo 를 이용해 body 에 붙여넣었습니다.붙여넣어진 h2 는 click 이벤트가 적용되지 않습니다.click 이벤트가 적용된 h2 를 만들기 위해서는 clone() 함수에 true 를 넘겨주어야 합니다. live 는 bind 와 달리 별다른 설정을 하지 않아도 복제된 h2 에 이벤트가 적용되어 있습니다. delegate 의 경..