jq 图片延迟加载

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>图片延迟加载</title>
<style>
*{margin:0;padding:0;list-style:none}
li{
float: left;
width: 400px;
height: 400px;
margin: 50px;
}
li img{
width: 100%;
height: 100%;
}
</style>
<script src=”http://code.jquery.com/jquery-1.7.2.min.js”></script>
<script>
$(function(){
function img(){
var aImg=$(‘#ul li img’);
var oScrollTop=$(document).scrollTop();
var oClientH=$(window).height();
aImg.each(function(index,element){
var oTop=$(element).offset().top;
var oSrc=$(element).attr(‘_src’);
if(oScrollTop+oClientH>oTop){
$(element).attr(‘src’,oSrc);
$(element).removeAttr(‘_src’);
}
});
}

$(window).bind({
‘scroll’:img,
‘load’ : img,
‘resize’: img
});

});
</script>

</head>
<body>
<ul id=”ul”>
<li><img _src=”img/a%20(1).jpg”></li>
<li><img _src=”img/a%20(2).jpg”></li>
<li><img _src=”img/a%20(3).jpg”></li>
<li><img _src=”img/a%20(4).jpg”></li>
<li><img _src=”img/a%20(5).jpg”></li>
<li><img _src=”img/a%20(6).jpg”></li>
<li><img _src=”img/a%20(7).jpg”></li>
<li><img _src=”img/a%20(8).jpg”></li>
<li><img _src=”img/a%20(9).jpg”></li>
<li><img _src=”img/a%20(10).jpg”></li>
</ul>
</body>
</html>

转【http://www.w3cfuns.com/notes/31062/147c7651eacc0e614046b4d4b166daaa.html】

Comments (12,477)

  1. travel

    Very good blog post.Much thanks again. Really Great.

  2. hotel in jimbaran

    I’m not that much of a internet reader to be honest but your
    blogs really nice, keep it up! I’ll go ahead and bookmark your website to come back later.
    Many thanks

  3. Veronique

    Wow, how fascinating and how stunning this ammolite jewelry is!

  4. Joma Jewellery a little

    Traditionally, the Celts transferred information of their tradition by means of word-of-mouth and it was because of this that no documentation on their historical past can be
    found on these individuals who grew to become proud warriors, merchants, and rulers.

  5. Carl

    A minimum of you care concerning the performing skill and that is really good.

  6. Do you mind if I quote a few of your posts as long
    as I provide credit and sources back to your weblog?
    My blog site is in the exact same niche as yours and my
    visitors would certainly benefit from some of the information you provide here.
    Please let me know if this okay with you. Thanks!

  7. joma jewellery a little joy

    Winner Emma Stone donned a Tiffany Archival assertion necklace and diamond
    earrings and rings.

  8. Joma Jewellery Stockists

    To both Mughal emperors and Indian maharajas, the quality and size
    of the gem have been of paramount importance, and table-minimize diamonds had
    been valued for his or her clarity and size above all else.

  9. pirater un compte facebook

    pirater un compte facebook

  10. Ulrike

    That you must focus on issues like diamond grades.

  11. Seth

    When you choose any original piece of jewellery with valuable gems and stones and even pure metals like gold
    and silver, then you have to be very explicit as to what sort
    of stone would you like. Stones are of numerous
    sorts and colors since they are imported from all over the world and then fitted into a specific piece of jewellery.

    So once you desire a turquoise shade pendant, you have to seek for the proper shade of turquoise as a result of
    the completely different stones from different elements of the world would give you a specific
    shade of their own. Pendants are economical to purchase, as
    a result of you’ll be able to have numerous many pendants with one
    simple gold or silver chain.

  12. Joma Jewellery UK

    The development was nicely ahead of forecasts for flat growth in a Reuters poll.

  13. Joma Jewellery a little

    You confirmed me one thing that’s new to me. Very nice lens.

  14. Virgilio

    If some one wants expert view about blogging afterward i recommend him/her to visit
    this webpage, Keep up the nice work.

  15. Jada

    We managed to meet up with three of the beautiful designers we’ve got the pleasure of working with, Tracey Birchwood, Kokkino and Jessica Flinn.

  16. numéro portable inversé

    You are so cool! I don’t think I’ve read
    something like this before. So nice to discover someone with
    some unique thoughts on this subject matter.
    Really.. thanks for starting this up. This web site is one thing
    that is required on the internet, someone with a bit of originality!

  17. baby alarm informations

    You need to be a part of a contest for one of the finest sites online.

    I’m going to recommend this website!

  18. João Emanuel

    Agradeço este post. Deixe-me experimentá-lo.

  19. Rosemary

    Description: This gentrified outdated fruit and vegetable
    market is now a classy European-fashion sq. with designer shops
    and stalls surrounded by fashionable bars, cafes and restaurants.

    It’s now extra fashionable with vacationers slightly than locals.

  20. rdhforum.alliance-rdhpractitioners.org

    Trial and error will in time give you a flawless fit in your scrap
    pieces and, once that has been achieved, you’ll
    be able to begin manufacturing on the ultimate work items.

    Tails could be reduce on each ends of the jewellery field sides and pins on both
    ends of the front and back items or vice versa, when you desire.

  21. Ofelia

    In this article, we will highlight the JDS Multi-Router, a dear
    however fairly compact stationary woodworking mechanism that may choose of joints together with mortise
    and tenon, angled mortise and tenon, box joints and dovetail joints.

  22. Cricket Betting Tips

    Whats up! I just want to give a huge thumbs up for the good info you could have right here on this post. I might be coming again to your blog for more soon.

  23. joma jewellery real silver

    I hope that the above has given you some concepts of
    small firms that you may easily start with little capital.

  24. Joma Jewellery Necklaces

    Whereas not as dazzling or sparkling, pearls all the time give someone a classy look and enchantment.

  25. スキンケア

    肌の手入れを辞典などで引くと、

    ”健全でまばゆい肌を長持ちさせるために化粧品などを使用して肌のお手入れをすること。お肌を清潔にしお肌が乾燥するのを防御するのを働きとし、洗顔した肌に化粧水などをつけるのがあたりまえである”

    とありますが、これじゃあいまいちよくわかりませんよね。

    それに、現在私の元には「スキンケアってどんな意味?」という連絡が、とても頻繁にあるんですよね・・・

    ということで、今宵は「スキンケアとは?」と題しまして、肌のお手入れの具体的な手法について、皆さんへお送りします。

    詳細は次のリンクをクリックしてください。

  26. Antoine

    When you see how much cash that you will be spending on this
    process, thee research aren’t going to be in vain. For getting rinng
    of her choice within your budget, it iss extrmely to create a hunt for precisely the
    same onn Internet seeing as there aree several online jewelers that offers affordable yet elegant rings.
    This just really demonstrates that diamonds remain and
    can regularly be a lady’s and each and every bride’s bewst friend. http://franklylz358blog.full-design.com/Different-Types-Of-Wedding-Rings-For-Men-2655643

  27. Joma Jewellery Bracelets

    Memorial Jewelry is a part of the Phoenix Group
    at Sunrise House in Macclesfield, Cheshire.

Leave a Comment

电子邮件地址不会被公开。 必填项已用*标注