In actual project development, we usually encounter such a scenario: a page has many pictures, and there are about one or two pictures on the first screen, so do we need to load all the pictures at one time? Obviously this is stupid and not only affects page rendering speed but also wastes bandwidth. This is what we usually call first screen loading. Technically, the technology used in it is lazy loading of images--to the visible area and then loading.
Ideas:
Replace all img attribute src attributes in the page with data-xx. When the page scrolls until the image appears in the visible area, use js to get the value of data-xx of the image and assign it to src.
About various widths and heights:
The width of the visible area of the page: document.body.clientWidth; The visible area of the web page is high: document.body.clientHeight; The width of the visible area of the web page: document.body.offsetWidth (including the width of the border); The height of the visible area of the web page: document.body.offsetHeight (including the width of the border); The full text width of the page body: document.body.scrollWidth; The height of the full text of the page body: document.body.scrollHeight; The height of the page being scrolled: document.body.scrollTop; The left side of the page is scrolled: document.body.scrollLeft; On the body of the page: window.screenTop; The left part of the body of the webpage: window.screenLeft; The height of the screen resolution: window.screen.height; The width of the screen resolution: window.screen.width; Screen available workspace height: window.screen.availHeight;
Example:
jqueryLazyload method
Download address: https://github.com/helijun/helijun/blob/master/plugin/lazyLoad/jquery.lazyload.js
<section class="module-section" id="container">
<img class="lazy-load" data-original="../static/img/loveLetter/teacher/teacher1.jpg" width="640" height="480" alt="测试懒加载图片"/>
</section>
require.config({
baseUrl : "/static",
paths: {
jquery:'component/jquery/jquery-3.1.0.min'
jqueryLazyload: 'component/lazyLoad/jquery.lazyload',//Image lazy loading
},
shim: {
jqueryLazyload: {
deps: ['jquery'],
exports: '$'
}
}
});
require(
[
'jquery',
'jqueryLazyload'
],
function($){
$(document).ready(function() {
$("img.lazy-load").lazyload({
effect : "fadeIn", //fade, show(direct display), fadeIn(fade in), slideDown(drop down)
threshold : 180, //preload, in When the picture is 180px away from the screen, it is loaded in advance
event: 'click', // Load when the event is triggered, click (click), mouseover (mouse over), sporty (movement), the default is scroll (sliding)
container: $( "#container"), // Specify the effect on a picture in a container
failure_limit: 2 //Load 2 pictures outside the visible area, lazyload will not continue loading when it finds the first picture that is not in the visible area by default , but when the HTML container is cluttered, the image in the visible area may not be loaded.
});
});
});
For code readability, I have written comments for attribute values. It is worth noting that the pre-made image attribute is data-original, and it is best to give the initial height and width a placeholder to avoid affecting the layout. Of course, for the demonstration here, I wrote 640x480. If it is a responsive page, the height and width need to be dynamically calculated.
dome demo address: http://h5.sztoda.cn/test/testLazyLoad
echo.js method
In the previous blog post "Some summary of front-end knowledge", a very simple, practical and lightweight image delay loading plugin echo.js was introduced. If your project does not depend on jquery, then this will be a good choice. 50 lines of code, only 1k after compression. Of course, you can completely integrate it into your own project!
Download address: https://github.com/helijun/helijun/tree/master/plugin/echo
<style>
.demo img {
width: 736px;
height: 490px;
background: url(images/loading.gif) 50% no-repeat;}
</style>
<div class="demo">
<img class="lazy" src="images/blank.gif" data-echo="images/big-1.jpg">
</div>
<script src="js/echo.min.js"></script>
<script>
Echo.init({
offset: 0,//How many pixels away from the visible area can the image be loaded
throttle: 0 //How many milliseconds the image delay to load
});
</script>
Description: blank.gif is a background image that is included in the plugin. The width and height of the picture must be set. Of course, external styles can be used to control the size of multiple pictures uniformly. data-echo points to the real image address.
Summarize:
Both are very simple, the implementation idea is the same, but jquerylazyload has a few more attributes. In fact, the commonly used echo is enough, and it can be fully integrated into the public js in your own project. Lazy loading of pictures is a very common and simple and practical function. If your project is still a fool-like one-time loading, then please spend 20 minutes to optimize~