{"id":1536,"date":"2017-06-10T14:01:20","date_gmt":"2017-06-10T06:01:20","guid":{"rendered":"http:\/\/www.xttblog.com\/?p=1536"},"modified":"2017-06-10T14:01:20","modified_gmt":"2017-06-10T06:01:20","slug":"jquery%e5%9b%be%e7%89%87%e5%bb%b6%e8%bf%9f%e5%8a%a0%e8%bd%bd%e6%8f%92%e4%bb%b6lazyload-js","status":"publish","type":"post","link":"https:\/\/www.xttblog.com\/?p=1536","title":{"rendered":"jQuery\u56fe\u7247\u5ef6\u8fdf\u52a0\u8f7d\u63d2\u4ef6lazyload.js"},"content":{"rendered":"<p>\n\tlazyload.js \u662f\u4e00\u6b3e\u57fa\u4e8ejQuery\u7684\u56fe\u7247\u5ef6\u8fdf\u52a0\u8f7d\u63d2\u4ef6\u3002lazyload.js\u7528\u4e8e\u957f\u9875\u9762\u56fe\u7247\u7684\u5ef6\u8fdf\u52a0\u8f7d\uff0c\u89c6\u53e3\u5916\u7684\u56fe\u7247\u4f1a\u5728\u7a97\u53e3\u6eda\u52a8\u5230\u5b83\u7684\u4f4d\u7f6e\u65f6\u518d\u8fdb\u884c\u52a0\u8f7d\uff0c\u8fd9\u662f\u4e0e\u9884\u52a0\u8f7d\u76f8\u53cd\u7684\u3002\n<\/p>\n<h2>\n\tlazyload.js\u7684\u7279\u70b9<br \/>\n<\/h2>\n<ul>\n<li>\n\t\t\u5b83\u53ef\u4ee5\u63d0\u9ad8\u9875\u9762\u52a0\u8f7d\u901f\u5ea6\uff1b\n\t<\/li>\n<li>\n\t\t\u5728\u67d0\u4e9b\u60c5\u51b5\u6e05\u6670\u5b83\u4e5f\u53ef\u4ee5\u5e2e\u52a9\u51cf\u5c11\u670d\u52a1\u5668\u8d1f\u8f7d\u3002\n\t<\/li>\n<\/ul>\n<h2>\n\tlazyload.js \u8fd0\u884c\u6548\u679c<br \/>\n<\/h2>\n<p>\n\t<img decoding=\"async\" alt=\"jquery.lazyload.js \u8fd0\u884c\u6548\u679c\" src=\"http:\/\/images.cnitblog.com\/blog\/446475\/201304\/09095707-58e564b95a7c427e9b53c1e1ac0e3089.jpg\" style=\"width: 400px;height: 252px\" \/>\n<\/p>\n<h2>\n\tlazyload.js \u4e0b\u8f7d<br \/>\n<\/h2>\n<p>\n\t\u5b9e\u4f8b\u4e0b\u8f7d\u5730\u5740\uff1a<a href=\"http:\/\/pan.baidu.com\/s\/1u9nf4\" name=\"lazyload.js \u6848\u4f8b\u4e0b\u8f7d\" target=\"_blank\" title=\"lazyload.js \u6848\u4f8b\u4e0b\u8f7d\">http:\/\/pan.baidu.com\/s\/1u9nf4<\/a>\n<\/p>\n<p>\n\t\u5b98\u65b9\u5730\u5740\uff1a<a href=\"http:\/\/appelsiini.net\/projects\/lazyload\/\" name=\"lazyload.js \u5b98\u65b9\u5730\u5740\" target=\"_blank\" title=\"lazyload.js \u5b98\u65b9\u5730\u5740\">http:\/\/appelsiini.net\/projects\/lazyload\/<\/a>\n<\/p>\n<h2>\n\tlazyload.js \u4f7f\u7528\u6559\u7a0b<br \/>\n<\/h2>\n<p>\n\t\u5f15\u7528jquery\u548cjquery.lazyload.js\u5230\u4f60\u7684\u9875\u9762\u3002\n<\/p>\n<pre class=\"brush:xml;\">\r\n&lt;script src=&quot;jquery-1.11.0.min.js&quot;&gt;&lt;\/script&gt;\r\n&lt;script src=&quot;jquery.lazyload.js?v=1.9.1&quot;&gt;&lt;\/script&gt;<\/pre>\n<p>\n\t\u4e3a\u56fe\u7247\u52a0\u5165\u6837\u5f0flazy\uff0c\u56fe\u7247\u8def\u5f84\u5f15\u7528\u65b9\u6cd5\u7528data-original\n<\/p>\n<pre class=\"brush:xml;\">\r\n&lt;img class=&quot;lazy&quot; data-original=&quot;img\/bmw_m1_hood.jpg&quot;&gt;\r\n&lt;img class=&quot;lazy&quot; data-original=&quot;img\/bmw_m1_side.jpg&quot;&gt;\r\n&lt;img class=&quot;lazy&quot; data-original=&quot;img\/viper_1.jpg&quot;&gt;\r\n&lt;img class=&quot;lazy&quot; data-original=&quot;img\/viper_corner.jpg&quot;&gt;\r\n&lt;img class=&quot;lazy&quot; data-original=&quot;img\/bmw_m3_gt.jpg&quot;&gt;\r\n&lt;img class=&quot;lazy&quot; data-original=&quot;img\/corvette_pitstop.jpg&quot;&gt;<\/pre>\n<p>\n\tjs\u51fa\u59cb\u5316lazyload\u5e76\u8bbe\u7f6e\u56fe\u7247\u663e\u793a\u65b9\u5f0f\n<\/p>\n<pre class=\"brush:xml;\">\r\n&lt;script type=&quot;text\/javascript&quot; charset=&quot;utf-8&quot;&gt;\r\n  $(function() {\r\n      $(&quot;img.lazy&quot;).lazyload({effect: &quot;fadeIn&quot;});\r\n  });\r\n&lt;\/script&gt;<\/pre>\n<h2>\n\tlazyload.js \u53c2\u6570\u8bbe\u7f6e<br \/>\n<\/h2>\n<pre class=\"brush:jscript;\">\r\n$(&quot;img.lazy&quot;).lazyload({\r\n  placeholder : &quot;img\/grey.gif&quot;, \/\/\u7528\u56fe\u7247\u63d0\u524d\u5360\u4f4d\r\n    \/\/ placeholder,\u503c\u4e3a\u67d0\u4e00\u56fe\u7247\u8def\u5f84.\u6b64\u56fe\u7247\u7528\u6765\u5360\u636e\u5c06\u8981\u52a0\u8f7d\u7684\u56fe\u7247\u7684\u4f4d\u7f6e,\u5f85\u56fe\u7247\u52a0\u8f7d\u65f6,\u5360\u4f4d\u56fe\u5219\u4f1a\u9690\u85cf\r\n  effect: &quot;fadeIn&quot;, \/\/ \u8f7d\u5165\u4f7f\u7528\u4f55\u79cd\u6548\u679c\r\n    \/\/ effect(\u7279\u6548),\u503c\u6709show(\u76f4\u63a5\u663e\u793a),fadeIn(\u6de1\u5165),slideDown(\u4e0b\u62c9)\u7b49,\u5e38\u7528fadeIn\r\n  threshold: 200, \/\/ \u63d0\u524d\u5f00\u59cb\u52a0\u8f7d\r\n    \/\/ threshold,\u503c\u4e3a\u6570\u5b57,\u4ee3\u8868\u9875\u9762\u9ad8\u5ea6.\u5982\u8bbe\u7f6e\u4e3a200,\u8868\u793a\u6eda\u52a8\u6761\u5728\u79bb\u76ee\u6807\u4f4d\u7f6e\u8fd8\u6709200\u7684\u9ad8\u5ea6\u65f6\u5c31\u5f00\u59cb\u52a0\u8f7d\u56fe\u7247,\u53ef\u4ee5\u505a\u5230\u4e0d\u8ba9\u7528\u6237\u5bdf\u89c9\r\n  event: &#039;click&#039;,  \/\/ \u4e8b\u4ef6\u89e6\u53d1\u65f6\u624d\u52a0\u8f7d\r\n    \/\/ event,\u503c\u6709click(\u70b9\u51fb),mouseover(\u9f20\u6807\u5212\u8fc7),sporty(\u8fd0\u52a8\u7684),foobar(&hellip;).\u53ef\u4ee5\u5b9e\u73b0\u9f20\u6807\u83ab\u8fc7\u6216\u70b9\u51fb\u56fe\u7247\u624d\u5f00\u59cb\u52a0\u8f7d,\u540e\u4e24\u4e2a\u503c\u672a\u6d4b\u8bd5&hellip;\r\n  container: $(&quot;#container&quot;),  \/\/ \u5bf9\u67d0\u5bb9\u5668\u4e2d\u7684\u56fe\u7247\u5b9e\u73b0\u6548\u679c\r\n    \/\/ container,\u503c\u4e3a\u67d0\u5bb9\u5668.lazyload\u9ed8\u8ba4\u5728\u62c9\u52a8\u6d4f\u89c8\u5668\u6eda\u52a8\u6761\u65f6\u751f\u6548,\u8fd9\u4e2a\u53c2\u6570\u53ef\u4ee5\u8ba9\u4f60\u5728\u62c9\u52a8\u67d0DIV\u7684\u6eda\u52a8\u6761\u65f6\u4f9d\u6b21\u52a0\u8f7d\u5176\u4e2d\u7684\u56fe\u7247\r\n  failurelimit : 10 \/\/ \u56fe\u7247\u6392\u5e8f\u6df7\u4e71\u65f6\r\n     \/\/ failurelimit,\u503c\u4e3a\u6570\u5b57.lazyload\u9ed8\u8ba4\u5728\u627e\u5230\u7b2c\u4e00\u5f20\u4e0d\u5728\u53ef\u89c1\u533a\u57df\u91cc\u7684\u56fe\u7247\u65f6\u5219\u4e0d\u518d\u7ee7\u7eed\u52a0\u8f7d,\r\n     \/\/\u4f46\u5f53HTML\u5bb9\u5668\u6df7\u4e71\u7684\u65f6\u5019\u53ef\u80fd\u51fa\u73b0\u53ef\u89c1\u533a\u57df\u5185\u56fe\u7247\u5e76\u6ca1\u52a0\u8f7d\u51fa\u6765\u7684\u60c5\u51b5,failurelimit\u610f\u5728\u52a0\u8f7dN\u5f20\u53ef\u89c1\u533a\u57df\u5916\u7684\u56fe\u7247,\u4ee5\u907f\u514d\u51fa\u73b0\u8fd9\u4e2a\u95ee\u9898.\r\n});<\/pre>\n<h2>\n\tlazyload.js \u81ea\u5b9a\u4e49\u89e6\u53d1\u4e8b\u4ef6<br \/>\n<\/h2>\n<p>\n\t\u9ed8\u8ba4\u7684\u89e6\u53d1\u4e8b\u4ef6\uff0c\u662f\u6eda\u52a8\uff0c\u5f53\u4f60\u6eda\u52a8\u7684\u65f6\u5019\uff0c\u5c31\u4f1a\u68c0\u67e5\u7136\u540e\u52a0\u8f7d\u3002\u4f60\u53ef\u4ee5\u4f7f\u7528event\u5c5e\u6027\uff0c\u8bbe\u7f6e\u4f60\u81ea\u5df1\u7684\u52a0\u8f7d\u4e8b\u4ef6\uff0c\u4e4b\u540e\u4f60\u53ef\u4ee5\u81ea\u5b9a\u4e49\u89e6\u53d1\u8fd9\u4e2a\u4e8b\u4ef6\u7684\u6761\u4ef6\uff0c\u7136\u540e\u53bb\u52a0\u8f7d\u56fe\u50cf\u3002\n<\/p>\n<pre class=\"brush:jscript;\">\r\n$(&quot;img.lazy&quot;).lazyload({ event : &quot;click&quot; });<\/pre>\n<h2>\n\tlazyload.js \u81ea\u5b9a\u4e49\u663e\u793a\u6548\u679c<br \/>\n<\/h2>\n<pre class=\"brush:jscript;\">\r\n$(&quot;img.lazy&quot;).lazyload({ effect : &quot;fadeIn&quot; });<\/pre>\n<p>\n\t\u9ed8\u8ba4\u7684\u56fe\u7247\u5b9e\u73b0\u6548\u679c\uff0c\u5c31\u662f\u6ca1\u6709\u6548\u679c\uff0c\u4e0b\u8f7d\u5b8c\u6210\u4e4b\u540e\uff0c\u76f4\u63a5\u663e\u793a\u51fa\u6765\u3002\u8fd9\u6837\u7684\u7528\u6237\u4f53\u9a8c\u5e76\u4e0d\u597d\uff0c\u4f60\u53ef\u4ee5\u8bbe\u7f6e effect \u5c5e\u6027\uff0c\u6765\u63a7\u5236\u663e\u793a\u56fe\u7247\u7684\u6548\u679c\u3002\n<\/p>\n<p>\n\tfadeIn\u7684\u6548\u679c\u5c31\u662f\uff0c\u6539\u53d8\u56fe\u7247\u7684\u900f\u660e\u5ea6\uff0c\u6e10\u73b0\u7684\u65b9\u5f0f\u51fa\u73b0\u3002\n<\/p>\n<h2>\n\tlazyload.js \u63d2\u4ef6\u539f\u7406<br \/>\n<\/h2>\n<p>\n\t\u4fee\u6539\u76ee\u6807 img \u7684 src \u5c5e\u6027\u4e3a orginal \u5c5e\u6027\uff0c\u4ece\u800c\u4e2d\u65ad\u56fe\u7247\u7684\u52a0\u8f7d\u3002\u68c0\u6d4b\u6eda\u52a8\u72b6\u6001\uff0c\u7136\u540e\u628a\u53ef\u89c6\u7f51\u9875\u4e2d\u7684 img \u7684 src \u5c5e\u6027\u8fd8\u539f\u52a0\u8f7d\u56fe\u7247\uff0c\u5236\u9020\u7f13\u51b2\u52a0\u8f7d\u7684\u6548\u679c\u3002\n<\/p>\n<p>\n\t\u4f46\u662f\u73b0\u5728\uff0c\u5f88\u591ajavascript\u5927\u725b\u5206\u6790\u5f97\u51fa\uff0c\u8fd9\u4e2a\u63d2\u4ef6\u5176\u5b9e\u5e76\u6ca1\u6709\u771f\u6b63\u7684\u7f13\u52a0\u8f7d\u6548\u679c\u3002\u786e\u5b9e\u662f\u8fd9\u6837\uff0c\u5b98\u65b9\u4e5f\u5df2\u7ecf\u7ed9\u51fa\u4e86\u8bf4\u660e\u548c\u89e3\u51b3\u65b9\u6cd5\u4e86\u3002\n<\/p>\n<p>\n\t\u95ee\u9898\u539f\u56e0\uff1a\u5728\u65b0\u7248\u7684\u6d4f\u89c8\u5668\u4e2d\uff0c\u5373\u4f7f\u4f60\u5220\u9664\u4e86 Javascript \u63a7\u5236\u7684 src \u5c5e\u6027\uff0c\u6d4f\u89c8\u5668\u4ecd\u7136\u4f1a\u53bb\u52a0\u8f7d\u8fd9\u4e2a\u56fe\u50cf\u3002\n<\/p>\n<p>\n\t\u89e3\u51b3\u65b9\u6cd5\uff1a\u76f4\u63a5\u4fee\u6539 HTML \u7684\u7ed3\u6784\uff0c\u5728 img \u6807\u7b7e\u4e2d\u6dfb\u52a0\u65b0\u7684\u5c5e\u6027\uff0c\u628a src \u5c5e\u6027\u7684\u503c\u6307\u5411\u5360\u4f4d\u56fe\u7247\uff0c\u6dfb\u52a0 data-original \u5c5e\u6027\uff0c\u8ba9\u5176\u6307\u5411\u771f\u6b63\u7684\u56fe\u50cf\u5730\u5740\u3002<\/p>\n<!-- <audio autoplay=\"autoplay\" height=\"100\" width=\"100\" hidden=\"true\"><source src=\"https:\/\/c.coka.la\/orAvPR.mp3\" type=\"audio\/mp3\"\/><\/audio><img decoding=\"async\" src=\"https:\/\/images.weserv.nl\/?url=https:\/\/ws3.sinaimg.cn\/large\/8fa5dcfcgy1g4em3rzar5j20ib089ae0.jpg\" alt=\"\u4e1a\u4f59\u8349\u516c\u4f17\u53f7\"\/> --><p><!-- <img decoding=\"async\" src=\"https:\/\/raw.githubusercontent.com\/xmt1139057136\/xttblog\/master\/8fa5dcfcgy1g4em3rzar5j20ib089ae0.jpg\" alt=\"\u4e1a\u4f59\u8349\u516c\u4f17\u53f7\"\/>--><img decoding=\"async\" src=\"https:\/\/saas.51autoparts.cn\/api\/admin\/sys-file\/oss\/file?fileName=84db51f8561e448f9a4fda2eff0811f9.jpg\" alt=\"\u4e1a\u4f59\u8349\u516c\u4f17\u53f7\"\/><\/p><p>\u6700\u540e\uff0c\u6b22\u8fce\u5173\u6ce8\u6211\u7684\u4e2a\u4eba\u5fae\u4fe1\u516c\u4f17\u53f7\uff1a\u4e1a\u4f59\u8349\uff08yyucao\uff09\uff01<b>\u53ef\u52a0\u4f5c\u8005\u5fae\u4fe1\u53f7\uff1a<font color=\"red\">xttblog2<\/font>\u3002\u5907\u6ce8\uff1a\u201c1\u201d\uff0c\u6dfb\u52a0\u535a\u4e3b\u5fae\u4fe1\u62c9\u4f60\u8fdb\u5fae\u4fe1\u7fa4\u3002\u5907\u6ce8\u9519\u8bef\u4e0d\u4f1a\u540c\u610f\u597d\u53cb\u7533\u8bf7\u3002<\/b>\u518d\u6b21\u611f\u8c22\u60a8\u7684\u5173\u6ce8\uff01\u540e\u7eed\u6709\u7cbe\u5f69\u5185\u5bb9\u4f1a\u7b2c\u4e00\u65f6\u95f4\u53d1\u7ed9\u60a8\uff01\u539f\u521b\u6587\u7ae0\u6295\u7a3f\u8bf7\u53d1\u9001\u81f3532009913@qq.com\u90ae\u7bb1\u3002\u5546\u52a1\u5408\u4f5c\u4e5f\u53ef\u6dfb\u52a0\u4f5c\u8005\u5fae\u4fe1\u8fdb\u884c\u8054\u7cfb\uff01<\/p><p>\u672c\u6587\u539f\u6587\u51fa\u5904\uff1a<a href=\"https:\/\/www.xttblog.com\">\u4e1a\u4f59\u8349<\/a>\uff1a &raquo; <a href=\"https:\/\/www.xttblog.com\/?p=1536\">jQuery\u56fe\u7247\u5ef6\u8fdf\u52a0\u8f7d\u63d2\u4ef6lazyload.js<\/a><\/p><!-- <div class=\"bd-reward-stl\"><button id=\"bdRewardBtn\"><span><\/span><\/button><\/div> -->","protected":false},"excerpt":{"rendered":"<p>lazyload.js \u662f\u4e00\u6b3e\u57fa\u4e8ejQuery\u7684\u56fe\u7247\u5ef6\u8fdf\u52a0\u8f7d\u63d2\u4ef6\u3002lazyload.js\u7528\u4e8e\u957f\u9875\u9762\u56fe\u7247\u7684\u5ef6\u8fdf\u52a0 [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[49,1274,1276,1277,1278],"class_list":["post-1536","post","type-post","status-publish","format-standard","hentry","category-html5","tag-jquery","tag-lazyload-js","tag-1277","tag-1278"],"_links":{"self":[{"href":"https:\/\/www.xttblog.com\/index.php?rest_route=\/wp\/v2\/posts\/1536","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.xttblog.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.xttblog.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.xttblog.com\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.xttblog.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1536"}],"version-history":[{"count":1,"href":"https:\/\/www.xttblog.com\/index.php?rest_route=\/wp\/v2\/posts\/1536\/revisions"}],"predecessor-version":[{"id":1537,"href":"https:\/\/www.xttblog.com\/index.php?rest_route=\/wp\/v2\/posts\/1536\/revisions\/1537"}],"wp:attachment":[{"href":"https:\/\/www.xttblog.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1536"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.xttblog.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1536"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.xttblog.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1536"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}