집 >웹 프론트엔드 >JS 튜토리얼 >js 및 jquery를 사용하여 이미지 자동 로딩을 구현하는 방법(코드 첨부)

js 및 jquery를 사용하여 이미지 자동 로딩을 구현하는 방법(코드 첨부)

php中世界最好的语言원래의: 2018-04-14 13:59:351715검색

이번에는 js 및 jquery(코드 포함)를 사용하여 이미지 자동 로딩을 구현하는 방법을 보여 드리겠습니다. js 및 jquery를 사용하여 이미지 자동 로딩을 구현하는 경우 주의 사항은 무엇입니까? .

①텍스트에 onload 사용: 페이지의 모든 콘텐츠(이미지 포함)가 로드된 후 다음과 같이 onload를 실행합니다.

<body onload="alert(1)"></body>          <!-- 当有一个onload -->
<body onload="alert(2);alert(3);alert(4)"></body> <!-- 当有多个onload用分号隔开,依次弹出 2 3 4 -->

②스크립트에서 window.onload 사용: 페이지의 모든 콘텐츠(이미지 포함)가 로드된 후 다음과 같이 window.onload를 실행합니다.

window.onload = function(){...}; //正确写法，这是匿名函数
//------------↓多个window.onload的错误写法-------------
window.onload = function(){alert("text1");}; //不执行
window.onload = function(){alert("text2");}; //执行
//------------↑---------------------------------------
//------------↓多个window.onload的正确写法---------------------------
window.attachEvent("onload",function(){alert('a')});
window.attachEvent("onload",function(){alert('b')});
window.attachEvent("onload",function(){alert('c')});
//重点提示：在IE浏览器下用 (window.attachEvent)，会弹出 c b a 
//重点提示：其他浏览器下用 (window.addEventListener)，会弹出 a b c
//------------↑-----------------------------------------------------

2. jQuery 자동 로딩

①페이지의 DOM 구조(이미지 제외)를 로드한 후 실행할 때(DOM 요소와 관련된 것들이 로드되지 않았을 수 있음) 다음과 같이 세 가지 방법으로 작성하는 방법이 있습니다.

$(document).ready(function(){...});//写法1，全称 
$(function(){...});        //写法2，简写 
jQuery(function($){...});     //写法3，简写

② 다음과 같이 페이지 내 모든 요소(이미지 포함)가 로딩된 후에만 실행합니다.

rreee

③익명 기능을 즉시 실행합니다. 익명 함수를 괄호로 묶은 후 괄호를 사용하면 익명 함수를 즉시 실행할 수 있습니다. 작성 방법은 다음과 같이 두 가지가 있습니다.

$(window).load(function() {...}); //等于JavaScript的写法，如window.onload = function(){...};

이 글의 사례를 읽으신 후 해당 방법을 마스터하셨으리라 믿습니다. . 더 흥미로운 정보를 보시려면 PHP 중국어 웹사이트에 들러주세요!

js 및 jquery를 사용하여 이미지 자동 로딩을 구현하는 방법(코드 첨부)

관련 기사