Experience in using jquery.lazyload.js

Today, I want to do some optimization in the project, do a lazy loading, I use jquery.lazyload.js, website: http://www.jq22.com/jquery-in....
The case given is for img, and then I wonder if it can be implemented in the background image. Looking at the source code roughly, it seems to have this function:

I posted the code I tested, including img and background lazy loading test (js and pictures need to be introduced by myself):

<!doctype html>
<meta charset="utf-8">
<title>Lazy Load Enabled</title>
<!--[if lt IE 9]>
    <script src="html5shiv.js"></script>
    .lazy {
        width: 50%;
        height: 500px;
    .bgs {
        width: 50%;
        height: 500px;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;

    <img class="lazy" data-original="img/1.jpg">
    <img class="lazy" data-original="img/2.jpg">
    <img class="lazy" data-original="img/3.jpg">
    <img class="lazy" data-original="img/4.jpg">
    <img class="lazy" data-original="img/5.jpg">
    <img class="lazy" data-original="img/6.jpg">
    <!-- Background maps can also be used -->
    <div class="lazy bgs" data-original="img/placeholder.png"></div>

    <script src="jquery-1.11.0.min.js"></script>
    <script src="jquery.lazyload.js?v=1.9.1"></script>
    <script type="text/javascript" charset="utf-8">
      $(function() {

            //Use pictures to occupy space ahead of time
            placeholder : "img/placeholder.png", 
            // What is the effect of loading
            effect: "fadeIn", 

Configuration of this plug-in http://www.jq22.com/jquery-in... There are.
This article is very simple. My purpose is to test whether background maps can be used.
But this plug-in needs to be written either in img or in style. It's not very friendly for page adaptation. I don't know if there's a friend who can solve this problem. If there's one, you can share it.

Tags: Javascript JQuery IE

Posted on Tue, 08 Oct 2019 13:50:19 -0700 by mrMarcus