<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jquery Implement lazy loading </title>
<style>
ul,
li {
list-style: none;
} .container {
width: 800px;
margin: 0 auto;
} .container li {
float: left;
margin: 10px 10px;
} .container li img {
width: 340px;
height: 260px;
}
</style>
</head> <body>
<ul class="container">
<li>
<a href="#">
<img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/1.jpg" />
</a>
</li>
<li>
<a href="#">
<img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/2.jpg" />
</a>
</li>
<li>
<a href="#">
<img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/3.jpg" />
</a>
</li>
<li>
<a href="#">
<img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/4.jpg" />
</a>
</li>
<li>
<a href="#">
<img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/5.jpg" />
</a>
</li>
<li>
<a href="#">
<img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/6.jpg" />
</a>
</li>
<li>
<a href="#">
<img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/7.jpg" />
</a>
</li>
<li>
<a href="#">
<img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/8.jpg" />
</a>
</li>
<li>
<a href="#">
<img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/9.jpg" />
</a>
</li>
<li>
<a href="#">
<img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/10.jpg" />
</a>
</li>
<li>
<a href="#">
<img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/11.jpg" />
</a>
</li>
<li>
<a href="#">
<img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/12.jpg" />
</a>
</li>
<li>
<a href="#">
<img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/13.jpg" />
</a>
</li>
<li>
<a href="#">
<img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/14.jpg" />
</a>
</li>
<li>
<a href="#">
<img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/15.jpg" />
</a>
</li>
<li>
<a href="#">
<img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/16.jpg" />
</a>
</li>
</ul>
</body>
// introduce jquery
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script>
// Monitor whether the document triggers a scrolling event
$(document).on('scroll', function () {
$(".container img").each(function () {
// Judge whether it is in the visible area also Judge lodingimg($(this)) Have you ever loaded If loaded, do not perform this step Or it will be executed again
if (showhide($(this)) && !lodingimg($(this))) {
voluation($(this)) // Put custom data-src Assign a value to img Medium src attribute
}
})
})
// The necessary condition to judge whether the picture needs to be added
function showhide(img) {
var scrolltop = $(document).scrollTop() // Get the part of the browser volume
var browser = document.documentElement.clientHeight; // Get the viewable area in the browser
var offsettop = img.offset().top; // Get the distance from the top of the picture
var imgheight = img.height() // Get the height of the image element
// Load pictures from top to bottom Judge If the distance of the picture > The browser scrolls away && Picture distance < The rolled out part + The viewable area of the browser
// Load pictures from the bottom up perhaps Picture distance < The rolled out part && Picture distance > The height of the roll - The height of the picture itself ( The boundary conditions )
if (offsettop > scrolltop && offsettop < (scrolltop + browser) || offsettop < scrolltop && offsettop > (scrolltop - imgheight)) {
return true
}
return false
}
// Put custom data-src Assign a value to img Medium src attribute
function voluation(img) {
return img.attr('src', img.attr('data-src'))
}
// Used to determine whether there is a load
function lodingimg(img) {
return img.attr('data-src') === img.attr('src')
}
// First render If the page is not executed once in advance, the picture will be blank You have to scroll to load
$(".container img").each(function () {
onecarry($(this))
})
// Execute this function for the first time
function onecarry(img) {
var scrolltop = $(document).scrollTop()
var browser = document.documentElement.clientHeight; // Get the viewable area in the browser
var offsettop = img.offset().top;
var imgheight = img.height()
if (offsettop > scrolltop && offsettop < (scrolltop + browser) || offsettop < scrolltop && offsettop > (scrolltop - imgheight)) {
voluation(img)
}
}
</script>
</html>

jQuery The realization picture lazy load more related article

  1. Use jQuery Realize the principle of image lazy loading

    original text :https://www.liaoxuefeng.com/article/00151045553343934ba3bb4ed684623b1bf00488231d88d000 In the web page , Often need to use ...

  2. jQuery Lazy loading of pictures

    jQuery Lazy loading of pictures function imgLazyLoad(options) { var settings = { Id: $('img'), threshold: 100, effectsp ...

  3. jQuery.imgLazyLoad Image lazy load component

    One . Preface When a page requests too many pictures , And the picture is too big , Page access is very slow , It's very unfriendly to the user experience : Loading with pictures , Can reduce the pressure on the server , Increase page traffic , Here is a summary of my own image lazy loading components ...

  4. jQuery Plug in image lazy loading lazyload

    come from XXX Preface to : What is? ImageLazyLoad technology When there are more pictures on the page , Opening a page will inevitably lead to a huge amount of data with the server Interaction . Especially for high-definition pictures , What's the percentage M Space .ImageLazyLoad technology ...

  5. jquery &lt;img&gt; Picture lazy loading and If the tag doesn't load a picture or doesn't have a picture , The default image is displayed

    Reference link :http://www.jq22.com/jquery-info390 Or compressed package download address : link :http://pan.baidu.com/s/1hsj8ZWw password :4a7s    There is no ...

  6. be based on jquery Lazy loading of pictures js

    function lazyload(option){ var settings={ defObj:null, defHeight: }; settings=$.extend(settings,opti ...

  7. [jQuery plug-in unit ] Handwriting a picture lazy load implementation

    I'll teach you how to do the image lazy loading plug-in That year That year , I'm still young Just took over a ASP.NET MVC Of web project , (C#/jQuery/Bootstrap) I didn't do it web Experience , There is no time reserved for study , ( As an item ...

  8. The front end realizes lazy loading of pictures (lazyload) Two ways

    In actual project development , We usually come across scenes like this : A page has a lot of pictures , And the first screen is about one or two pictures , So do we have to load all the pictures at once ? Obviously it's stupid , It not only affects the speed of page rendering , And waste bandwidth . That's what we're talking about ...

  9. jquery Realize simple waterfall flow layout ( To continue ): Picture lazy loading

    # jquery Realize simple waterfall flow layout ( To continue ): Picture lazy loading This article is jquery A small expansion of the idea of simple waterfall flow layout . The code continues to improve based on the previous code . Lazy loading of pictures is to trigger the loading of pictures only when certain conditions are met . The most common specific table ...

Random recommendation

  1. nginx User authentication configuration ( Basic HTTP authentication)

    ngx_http_auth_basic_module Module implementation allows access to , Access is only allowed if the correct user password is entered web Content .web Some of the content on don't want to be known by others , But I want some people to see .nginx Of http aut ...

  2. How to use impress.js Make a web version of PPT

    blockquote{font-size: 18px;line-height:1.5;margin:0;}line-height: 1.5; To do a website production standard training , The village head had a training before , But then one ...

  3. IP Address format control

    /// <summary> /// verification IP Whether the format is entered correctly /// </summary> /// <param name="ip"></ ...

  4. Java Multithreading socket Examples of withdrawals runnable callable

    socket Partial reference  http://blog.csdn.net/kongxx/article/details/7259465 Please refer to  http://blog.csdn.net/dayday198 ...

  5. sharepoint 2013 Attachment control FileUpload How to check whether it is a picture

    Note about the attachment control FileUpload How to check whether it is a picture : function checkImg() { var fileObj =document.getElementById('<%= ...

  6. centos7 Turn off firewall ( turn )

    Direct command :service firewalld stop 1. Disable Firewalld Service. [root@rhel-centos7-tejas-barot-linux ~]# s ...

  7. gulp+babel Face the future and become

    1. Need to install locally node; 2. install gulp: 3. Start at the root of the project node; install babel Components : npm install --save-dev babel-core npm install --s ...

  8. Lei Linpeng shares : C# brief introduction

    C# brief introduction C# It's a modern . General purpose . Object oriented programming language , It was created by Microsoft (Microsoft) Developed , from Ecma and ISO Approved . C# By Anders Hejlsberg With his team ...

  9. DES Algorithm ,JAVA, Problems encountered

    (1) Use Based64 Problems with coding . java.lang.IllegalArgumentException This happens when decrypting , The main reason is based64 Encryption uses sun The inner package of sun.misc ...

  10. 5、 ... and 、CLR When loading assembly code ,JIT The impact of compilers on performance

    1.CLR Performance loss from first loading code Four .CLR Executing code in an assembly introduces CLR On the first execution of a class , An internal structure is initialized , Then when the target method is called for the first time ,JITComplier function (JIT compiler ) Will verify IL ...