How to implement automatic loading of images with js and jquery (code attached)-JS Tutorial-php.cn

How to implement automatic loading of images with js and jquery (code attached)

php中世界最好的语言

Release： 2018-04-14 13:59:35

Original

1653 people have browsed it

This time I will show you how to implement automatic loading of images with js and jquery (with code). What are the precautions for automatic loading of images with js and jquery? Here is the actual combat Let’s take a look at the case.

1. JavaScript

Automatic loading ① Use onload in text: Execute onload after all the content (including images) in the page has been loaded, as follows:

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

Copy after login

②Use window.onload in the script: Execute window.onload after all the content in the page (including images) has been loaded, as follows:

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
//------------↑-----------------------------------------------------

Copy after login

2. jQuery automatic loading

①Execute after the DOM structure (excluding images) in the page is loaded (maybe the things associated with the DOM elements have not been loaded). There are three ways to write it, as follows:

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

Copy after login

② Execute only after all elements in the page (including images) are loaded, as follows.

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

Copy after login

③Execute the anonymous function immediately. When an anonymous function is enclosed in parentheses and then followed by parentheses, the anonymous function can be run immediately. There are two ways to write it, as follows:

(function(){...})();    //写法1，不加参数
(function($){...})(jQuery); //写法2，加参数，避免与其他变量发生冲突

Copy after login

I believe you have mastered the method after reading the case in this article. For more exciting content, please pay attention to other related articles on the php Chinese website!