Scroll loading of images in the HTML page of a mobile device

Now the mobile Internet is popular all over the world, the Elements of mobile page is also rich and colorful, a mobile page of more than 10 pictures is a normal thing. However, many mobile users still stay in a network such as 2g,3g. So bandwidth users, when browsing such a page, to load the page, it may take 10s,20s or more , seriously affect the user's experience. For such a problem, it is important to have the pictures in the page roll-load (and then load the pictures when they appear on the monitor screen)! This can also effectively save our server bandwidth and solve the problem of large request concurrency.

1,.

This is the picture that was loaded during the Daisy show this is the picture after the successful loading

2. Front-end Code implementation

2.1, a normal picture of the HTML code should be as follows:

　　　　　

2.2, the picture into a rolling load, the image of the HTML code should be this:

　　　　

Style= "Background:url (images/scrollloading/loading.gif) no-repeat Center;"

xsrc= "Http://staticone.whyt.net.cn/net/ueditor/jsp/upload/image/20150502/1430545369965005095.jpg"/>

Parameter description:

SRC: This is a 1px * 1px gif transparent picture (small size). The address of SRC is absolutely not wrong (if wrong, the browser appears with a red Cross symbol.) For that, I chose to replace it with a very small picture.

Sytle: Here is mainly a chrysanthemum display background picture, the purpose is to in the browser request server picture loading process, display a daisy load diagram

XSRC: This is a custom property that puts the correct address of the IMG image.

2.3, the HTML after loading, to realize the rolling load, but also need to introduce a JS file. 　　 because the bandwidth of the mobile Internet is very limited, and jquery's smallest js file is about 100K, so many mobile internet pages will abandon the use of jquery. Given such conditions, I wrote the corresponding JS (this JS only 3 K data) with native JavaScript. reference to this JS file is a location requirement, in the </body> of the previous line of the label, otherwise it will not be able to implement rolling load.

JS: To www.manyjar.com this site, search myscrollloading, you can find the download of the file.

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

(Manyjar This site provides a very huge amount of jar file download, Java learner or developer engineer, should be very practical, recommend you can go to see more)

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

　　<script type= "Text/javascript" src= "Js/scrollloading/myscrollloading.js" ></script>

</body>

2.4, complete the good 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, the background to modify the HTML code

Premise: All the code in the project has been implemented well, the administrator through the Baidu editor, such as Rich text editor to write mobile articles. So what we are going to achieve at this point is, without adding any work from the administrator, let our front-end code implement the function of this picture scrolling mechanism.

Idea: in front page to take the Rich Text editor content, the contents of the HTML code to be modified, and then put in front of the display.

Here we take Java as an example. Let the program modify the HTML code, we have to do is to simulate the browser kernel, the HTML tags are all loaded with DOM elements, and then modify.

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

To www.manyjar.com this site, search Jsoup, find the corresponding jar download.

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

Directly into the project, the implementation code for the 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" property
String strclass=link.attr ("class");
if (strclass==null| | Strclass.length () ==0) {
Link.attr ("Class", "scrollloading");
}else{
Link.attr ("Class", "scrollloading" +strclass);
}

Add the Data-url property with a value of SRC
String strsrc=link.attr ("src");
Link.attr ("Data-url", STRSRC);
Link.attr ("Xsrc", STRSRC);

Modify the SRC value to a 1px * 1px gif transparent image (small size)
Link.attr ("src", "images/scrollloading/pixel.gif");


Modify the Style property
String strstyle=link.attr ("style");
If it is a JPG type picture, set the background image to wait for the daisy diagram, otherwise do not set
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;
}

I wish you all a successful completion of this technology! I am www.manyjar.com, the author of this small product, invites you to experience a lot!

　　

Scroll loading of images in the HTML page of a mobile device