Scroll loading of images in HTML pages on mobile devices_html/css_WEB-ITnose

Nowadays, the mobile Internet is popular all over the world, and the elements of mobile pages are also rich and colorful. It is normal for a mobile page to have more than 10 pictures. But relatively speaking, many mobile users still stay in networks such as 2G and 3G. So when users with such bandwidth browse such a page, it may take 10s, 20s or even more to load the page, which seriously affects the user experience. In response to such a problem, it is very important to allow the images in the page to be loaded in a rolling manner (the images are loaded when they appear on the monitor screen)! This can also effectively save the bandwidth of our server and solve the problem of large concurrency requests.

1. Rendering.

This is the picture of the picture in the loading process. > 2.1. The HTML code of a normal picture should be as follows:

　　

　2.2. After turning the image into a scrolling load, the HTML code of the image should be like this:

　< ;img width="360" height="200"

　style="background:url( images/scrollLoading/loading.gif) no-repeat center;"

　"/>

　Parameter description:

　src: This is a 1px * 1px GIF transparent image (small size). The address of src must not be wrong (if it is wrong, a red cross will appear in the browser). For this reason, I chose to replace it with a very small picture.

sytle: This is mainly a chrysanthemum display background image. The purpose is to display a chrysanthemum loading image during the loading process of the browser requesting the server image

xSrc: This is a custom attribute , the correct address of the img picture is placed.

2.3. After the HTML is loaded, to implement rolling loading, a js file needs to be introduced. Since the bandwidth of the mobile Internet is very limited, and the smallest js file of jquery is about 100K, many mobile Internet pages will abandon the use of jquery. Given such conditions, I wrote the corresponding js myself using native javascript (this js only has 3K data volume). There are location requirements for referencing this js file, which must be on the line before the