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

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:

          <!-- 当有一个onload -->
 <!-- 当有多个onload用分号隔开,依次弹出 2 3 4 -->

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

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，简写

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

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

③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，加参数，避免与其他变量发生冲突

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!

Recommended reading:

The above is the detailed content of How to implement automatic loading of images with js and jquery (code attached). For more information, please follow other related articles on the PHP Chinese website!