Home > Developer > JavaScript
When the page is too long (more than 3 screens) and there are many images, the browser loads all the images by default, which may cause the pictures on the second screen to be displayed, however, the images on the first screen are still being loaded. In this case, it is best to use "javascript delayed loading" to improve the user experience.
Principle:
1. Determine the screen number of the image based on the distance between the image element and the top of the page.
2. the SRC values of all image elements are not set first, but other custom attributes are used. For example, SRC is written as lazy_src (in this way, the browser will not automatically load the image)
3. based on the judgment of 1, if it is your turn to appear (that is, the distance to the top changes, for example, the user pulls the scroll bar), the value of lazy_src is assigned to SRC, in this way, the browser starts loading.
Code(Collected on the Internet)
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <HTML xmlns =" http://www.w3.org/1999/xhtml ">Note: It is best to use styles to define the height of an image. Otherwise, the height of the image is 0 by default. In the above example, all IMG labels are crowded together and all are on the first screen, resulting inProgramI think they should all be loaded, so they will not be able to see the effect.
In addition, this method has a fatal drawback: If the browser disables JavaScript, it will become invalid! Therefore, consider it before using it, or add some prompts on the page (for example, "your browser does not support JavaScript, and the page display may be abnormal)
Appendix: How to quickly disable and enable Javascript on Firefox
As shown in, enter about: config in the address bar of Firefox, find javascript: enabled, and double-click to switch to true or false (that is, enable or disable)
Of course, the master in the garden also has a more powerful imageslazyload image, which is recommended for those who want to study in depth.
In addition, jquery is also a plug-in dedicated to implement delayed loading jquery. lazyload, which is also very convenient.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
