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" src="http://www.whyt.net.cn/net/images/scrollLoading/pixel.gif"

　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 tag, otherwise scrolling loading cannot be achieved.

js download address: Go to the website www.manyjar.com and search for myscrollLoading to find the download of the file.

Or download this link directly: http://www.manyjar.com/download?storeName=m/myscrollLoading/myscrollLoading.js

(The manyjar website provides a very large number of jars File download, it should be very practical for Java learners or developer engineers, I recommend you to read more)

In the HTML code, the format of the imported file is as follows:

　

　

2.4. Completed example http://www.whyt.net.cn/net/preArticel?wxusername=o4Yv7t3nof9hS6TYGQhvioCWrt5Q&id=115

This example is in the 2G network. The display is particularly friendly!

3. Modify the html code in the background

Premise: All the codes in the project have been implemented, and the administrator uses rich text editing such as Baidu Editor To write mobile articles. So what we want to achieve at this time is to let our front-end code realize the function of this image scrolling loading mechanism without adding any work to the administrator?

Idea: When you want to get the rich text editor content on the front-end page, modify the content of the HTML code you get, and then put it on the front-end for display.

We take java as an example here. To let the program modify the HTML code, what we have to do is to simulate the browser kernel, load all the HTML tags as DOM elements, and then modify them.

Here we use the jar package jsoup-1.6.1.jar.

Go to the website www.manyjar.com, search for jsoup, find the corresponding jar and download it.

Or directly download this link: http://www.manyjar.com/download?storeName=j/jsoup/jsoup-1.6.1.jar.zip

Directly import into the project , the implementation code of html code modification is as follows:

Public String htmlToLoadingHtml(String html){

Document doc = Jsoup.parse(html);

　Elements links=doc.getElementsByTag("img");
　for(Element link : links){

　　//Add class="scrollLoading" attribute
　String strClass=link.attr ("class");
if(strClass==null||strClass.length()==0){
link.attr("class","scrollLoading");
}else{
link.attr("class","scrollLoading " strClass);
}

//Add data-url attribute, the value is the value of src
String strSrc=link.attr(" src");
// link.attr("data-url",strSrc);
link.attr("xSrc",strSrc);

//Change the value of src to A 1px * 1px gif transparent image (small size)
link.attr("src","images/scrollLoading/pixel.gif");


//Modify the style attribute
String strStyle=link.attr("style");
//If it is a jpg type picture, set the chrysanthemum picture waiting for the background image, otherwise do not set it
if(strSrc.contains(" .jpg")){
　if(strStyle==null||strStyle.length()==0){
　link.attr("style","background:url(images/scrollLoading/loading.gif ) no-repeat center; ");
　}else{
　link.attr("style","background:url(images/scrollLoading/loading.gif) no-repeat center; " strStyle);
}
}
}
html=doc.html();
return html;
}

Congratulations Everyone successfully completed this technique! I am the author of this small product www.manyjar.com, and I sincerely invite everyone to try it!