Home>

Our task is to have a part of the page at first,We have a link for more photos below. After clicking, a part of the image is loaded after the current page.Click the link again,Keep loading,Until the pages we list are loaded,The link also disappeared.

This only captures the bottom part of the page.When hovering over the image,There will be text,The text disappears when the mouse is moved out.

All we have to do now is load some data when clicking the morephotos link below,Then click again to load some data,Until the data is loaded.

First, the code in the body is as follows:

<div id="container">
<h1>photo gallery</h1>
<div id="gallery">
  <div class="photo">
    <img src="./images/1.jpg">
    <div class="details">
      <div class="description">the cullin mountains, isle of skye ....</div>
      <div class="date">12/24/2000</div>
      <div class="photographer">alasdair dougall</div>
    </div>
  </div>
  <div class="photo">
    <img src="./images/2.jpg">
    <div class="details">
      <div class="description">the cullin mountains, isle of skye ....</div>
      <div class="date">12/24/2000</div>
      <div class="photographer">alasdair dougall</div>
    </div>
  </div>
    <div class="photo">
    <img src="./images/3.jpg">
    <div class="details">
      <div class="description">the cullin mountains, isle of skye ....</div>
      <div class="date">12/24/2000</div>
      <div class="photographer">alasdair dougall</div>
    </div>
  </div>
//Several pictures
</div>
 <div class="link"><a id="more-photos" href="1.html">more photos></a></div>
</div>

Then write several html code snippets in the same root directory,Used for loading.

For example, I have a 1.html code as follows

<div class="photo">
    <img src="./images/1.jpg">
    <div class="details">
      <div class="description">the cullin mountains, isle of skye</div>
      <div class="date">12/24/2000</div>
      <div class="photographer">alasdair dougall</div>
    </div>
  </div>
  <div class="photo">
    <img src="./images/2.jpg">
    <div class="details">
      <div class="description">the cullin mountains, isle of skye</div>
      <div class="date">12/24/2000</div>
      <div class="photographer">alasdair dougall</div>
    </div>
  </div>
    <div class="photo">
    <img src="./images/3.jpg">
    <div class="details">
      <div class="description">the cullin mountains, isle of skye</div>
      <div class="date">12/24/2000</div>
      <div class="photographer">alasdair dougall</div>
    </div>
  </div>
    <div class="photo">
    <img src="./images/4.jpg">
    <div class="details">
      <div class="description">the cullin mountains, isle of skye</div>
      <div class="date">12/24/2000</div>
      <div class="photographer">alasdair dougall</div>
    </div>
  </div>
    <div class="photo">
    <img src="./images/5.jpg">
    <div class="details">
      <div class="description">the cullin mountains, isle of skye</div>
      <div class="date">12/24/2000</div>
      <div class="photographer">alasdair dougall</div>
    </div>
  </div>
    <div class="photo">
    <img src="./images/6.jpg">
    <div class="details">
      <div class="description">the cullin mountains, isle of skye</div>
      <div class="date">12/24/2000</div>
      <div class="photographer">alasdair dougall</div>
    </div>
  </div>

In this html snippet I introduced 6 pictures. Other snippets such as 2.html and so on can be written after the above.After defining a lot of html fragments, use jquery to append data dynamically.

First introduce a jquery library

<script>
  $(document) .ready (function () {
  //First define a variable to record how many pages are currently
    var pagenum=1;
    //Add a click event to the link
    $("#more-photos"). click (function (event) {
      event.preventdefault ();
      var $link=$(this);
      //Get the URL of the currently clicked link
      var url=$link.attr ("href");
      //If the URL of the link exists, append the page
      if (url) {
        $.get (url, function (data) {
          $("#gallery"). append (data);
        });
    pagenum ++;
  //There are ten clips to add in total,The names are 1.html, 2.html ... 10.html
    When the total number of current pages is less than the total,Make link updates.
    if (pagenum&10) {
      $link.attr ("href", "./"+pagenum+".html");
        }
    //After appending all fragments,Remove link.
      else {
        $link.remove ();
      }
      }
    })
  });

The above code can dynamically add data to the page.

But the following error appears in Google's browser:

jquery.js:8475 xmlhttprequest cannot load file:///c:/users/%e9%95%bf%e5%ad%99%e4%b8%b9%e5%87%a4/desktop/webtest/1.html . cross origin requests are only supported for protocol schemes:http, data, chrome, chrome-extension, https.

Tested in the environment of ie10,no problem.

SolutionIt is to install a web server, and then copy the files into the project,Access by path in web server,No problem! It looks like http://localhost:8080/ajax/ajaxload.html

Since there are also mouseover events,When we hover the mouse over an image,Text will appear,When removed, the text on the picture disappears.

$(document) .ready (function () {
    $("div .photo"). hover (function () {
      $(this) .find (". details"). fadeto ("slow", 0.7);
    }, function () {
        $(this) .find (". details"). fadeout ("slow");
    })
  });

Or you can combine the above code to reduce redundant code:

$(document) .ready (function () {
  $("div.photo"). on ("mouseenter mouseleave",      function (event) {
      var $details=$(this) .find (". details");
      if (event.type == "mouseenter") {
        $details.fadeto ("slow", 0.7);
        //0.7 stands for transparency
      }
      else {
        $details.fadeout ("slow");
      }
    })
});

When we use the above two codes to add mouseover events for each picture,Only those images on the original page will be bound to events,Events cannot be bound to the dynamically loaded images.Because event handlers are only added to elements that already exist when the method is called,Like elements that are dynamically appended through this,Those events will not be bound.

So there are two solutions:

1. Rebind event handler after dynamic loading

2. Binding events to existing elements from the beginning,Depends on event bubbling.

The next step is to use jquery's delegate method;

$(document) .ready (function () {
    $("#gallery"). on ("mouseenter mouseleave", "div.photo", function (event) {
      var $details=$(this) .find (". details");
      if (event.type == "mouseenter") {
        $details.fadeto ("slow", 0.7);
      }
      else {
        $details.fadeout ("slow");
      }
    })
  })

$("#gallery"). on ("mouseenter mouseleave", "div.photo", function (event), with "div.photo" as the second parameter,The .on () method maps this to the elements in the gallery that match the selector.in other words,This is the element that points to the div class="photo" in the gallery.

So in the last appended page,Since all belong to the elements under the gallery,So each picture will be added with a corresponding event.

Maybe if you do n’t know which parent element the page i want to add,You can replace "#gallery" in $("#gallery"). On () with document. This way you don't have to worry about choosing the wrong container.Because document is the ancestor of all elements in the page.

But there are disadvantages to using the document:

When the dom nesting structure is deep,Event bubbling through large numbers of ancestor elements has a significant performance penalty.

But there are other reasons why we choose document as the delegate scope.

Generally speaking,Only when the corresponding dom element is loaded,Only bind it to event handlers.That's why we put the code inside $(document) .ready (function () {}.But the document element can be called almost immediately as the page loads.Binding handlers to documents doesn't have to wait until the full dom build is finished.For example, the above code can be written as:"

(function ($) {
    $(document) .on ("mouseenter mouseleave", "div.photo", function (event) {
      var $details=$(this) .find (". details");
      if (event.type == "mouseenter") {
        $details.fadeto ("slow", 0.7);
      }
      else {
        $details.fadeout ("slow");
      }
    })
  }) (jquery);

Because I did n’t wait for the entire document to be ready,So you can make sure that all

elements are rendered on the page,You can apply mouseenter and mouseleave behaviors.

The above is all about using jquery to dynamically append page data and event delegation.Attach the source code below;

<! Doctype html>
<html>
<head>
<meta charset="utf-8" />
  <title>dynamic loading</title>
  <script type="text/javascript" src="http://libs.google.com/jquery/1.9.0/jquery.js"></script>
  <style type="text/css">
  * {
    margin:0px;
    padding:0px;
  }
  #container {
    position:relative;
    width:1300px;
    margin:0 auto;
    /* background-color:#ccc;
    height:auto;* /
  }
  #gallery {
    position:relative;
    width:1300px;
    margin:0 auto;
  }
  .details {
    display:none;
  }
  .photo {
    padding:20px;
    border-radius:5px;
    border:1px solid #ccc;
    box-shadow:0 0 5px #ccc;
    float:left;
    margin:8px;
  }
  .photo img {
    /* z-index:1;* /
    width:200px;
    height:300px;
    clear:both;
  }
  .photo .details {
    position:absolute;
    z-index:2;
    padding-left:20px;
    margin-top:-200px;
    /* clear:both;* /
    overflow:hidden;
  }
  .description {
    overflow:hidden;
    width:200px;
    color:lightgreen;
    font-size:18px;
    font-weight:bold;
  }
  .date {
    font-size:16px;
    margin:20px 0px;
    color:red;
  }
  .photographer {
    font-size:14px;
    font-family:"arial";
  }
  .link a {
    clear:both;
    text-decoration:none;
    padding-left:90%;
  }
  h1 {
    text-align:center;
  }
  </style>
  <script>
  $(document) .ready (function () {
    var pagenum=1;
    $("#more-photos"). click (function (event) {
      event.preventdefault ();
      var $link=$(this);
      var url=$link.attr ("href");
      console.log (url);
      if (url) {
        $.get (url, function (data) {
          $("#gallery"). append (data);
        });
        pagenum ++;
        if (pagenum&4;{
          $link.attr ("href", "./"+pagenum+".html");
        }
      else {
        $link.remove ();
      }
      }
    })
  })
  //$(document) .ready (function () {
  //$("div .photo"). hover (function () {
  //$(this) .find (". details"). fadeto ("slow", 0.7);
  //}, function () {
  //$(this) .find (". details"). fadeout ("slow");
  //})
  //})
  $(document) .ready (function () {
    $("#gallery"). on ("mouseenter mouseleave", "div.photo", function (event) {
      var $details=$(this) .find (". details");
      if (event.type == "mouseenter") {
        $details.fadeto ("slow", 0.7);
      }
      else {
        $details.fadeout ("slow");
      }
    })
  })
  </script>
</head>
<body>
<div id="container">
<h1>photo gallery</h1>
<div id="gallery">
  <div class="photo">
    <img src="./images/1.jpg">
    <div class="details">
      <div class="description">the cullin mountains, isle of skye ....</div>
      <div class="date">12/24/2000</div>
      <div class="photographer">alasdair dougall</div>
    </div>
  </div>
  <div class="photo">
    <img src="./images/2.jpg">
    <div class="details">
      <div class="description">the cullin mountains, isle of skye ....</div>
      <div class="date">12/24/2000</div>
      <div class="photographer">alasdair dougall</div>
    </div>
  </div>
    <div class="photo">
    <img src="./images/3.jpg">
    <div class="details">
      <div class="description">the cullin mountains, isle of skye ....</div>
      <div class="date">12/24/2000</div>
      <div class="photographer">alasdair dougall</div>
    </div>
  </div>
    <div class="photo">
    <img src="./images/4.jpg">
    <div class="details">
      <div class="description">the cullin mountains, isle of skye .....</div>
      <div class="date">12/24/2000</div>
      <div class="photographer">alasdair dougall</div>
    </div>
  </div>
    <div class="photo">
    <img src="./images/5.jpg">
    <div class="details">
      <div class="description">the cullin mountains, isle of skye ....</div>
      <div class="date">12/24/2000</div>
      <div class="photographer">alasdair dougall</div>
    </div>
  </div>
    <div class="photo">
    <img src="./images/6.jpg">
    <div class="details">
      <div class="description">the cullin mountains, isle of skye ...</div>
      <div class="date">12/24/2000</div>
      <div class="photographer">alasdair dougall</div>
    </div>
  </div>
    <div class="photo">
    <img src="./images/7.jpg">
    <div class="details">
      <div class="description">the cullin mountains, isle of skye ....</div>
      <div class="date">12/24/2000</div>
      <div class="photographer">alasdair dougall</div>
    </div>
  </div>
    <div class="photo">
    <img src="./images/8.jpg">
    <div class="details">
      <div class="description">the cullin mountains, isle of skye .....</div>
      <div class="date">12/24/2000</div>
      <div class="photographer">alasdair dougall</div>
    </div>
  </div>
    <div class="photo">
    <img src="./images/9.jpg">
    <div class="details">
      <div class="description">the cullin mountains, isle of skye ......</div>
      <div class="date">12/24/2000</div>
      <div class="photographer">alasdair dougall</div>
    </div>
  </div>
    <div class="photo">
    <img src="./images/10.jpg">
    <div class="details">
      <div class="description">the cullin mountains, isle of skye</div>
      <div class="date">12/24/2000</div>
      <div class="photographer">alasdair dougall</div>
    </div>
  </div>
    <div class="photo">
    <img src="./images/11.jpg">
    <div class="details">
      <div class="description">the cullin mountains, isle of skye</div>
      <div class="date">12/24/2000</div>
      <div class="photographer">alasdair dougall</div>
    </div>
  </div>
    <div class="photo">
    <img src="./images/12.jpg">
    <div class="details">
      <div class="description">the cullin mountains, isle of skye</div>
      <div class="date">12/24/2000</div>
      <div class="photographer">alasdair dougall</div>
    </div>
  </div>
    <div class="photo">
    <img src="./images/13.jpg">
    <div class="details">
      <div class="description">the cullin mountains, isle of skye</div>
      <div class="date">12/24/2000</div>
      <div class="photographer">alasdair dougall</div>
    </div>
  </div>
    <div class="photo">
    <img src="./images/14.jpg">
    <div class="details">
      <div class="description">the cullin mountains, isle of skye</div>
      <div class="date">12/24/2000</div>
      <div class="photographer">alasdair dougall</div>
    </div>
  </div>
    <div class="photo">
    <img src="./images/15.jpg">
    <div class="details">
      <div class="description">the cullin mountains, isle of skye</div>
      <div class="date">12/24/2000</div>
      <div class="photographer">alasdair dougall</div>
    </div>
  </div>
</div>
 <div class="link"><a id="more-photos" href="1.html">more photos></a></div>
</div>
</body>
</html>
  • Previous Detailed SpringMVC interaction method with json data
  • Next jQuery implements text flashing prompt code that mimics QQ avatar flashing effect