{"id":280,"date":"2013-09-05T18:07:47","date_gmt":"2013-09-05T10:07:47","guid":{"rendered":"http:\/\/www.zyuns.com\/?p=280"},"modified":"2015-02-15T20:55:47","modified_gmt":"2015-02-15T12:55:47","slug":"lazyload-tu-pian-yan-chi-jia-zai","status":"publish","type":"post","link":"https:\/\/www.siediyer.cn\/?p=280","title":{"rendered":"LazyLoad\u56fe\u7247\u5ef6\u8fdf\u52a0\u8f7d"},"content":{"rendered":"

\u4ece\u7f51\u4e0a\u4e0b\u8f7d\u6765\u7684\u7248\u672c\u591a\u591a\u5c11\u5c11\u90fd\u6709\u4e9bBUG\uff0c\u5c24\u5176\u662f\u52a0\u8f7d\u540e\u5728IE6\u548cIE7\u4e0b\u56fe\u7247\u95ea\u52a8\u662f\u4e2a\u5927\u95ee\u9898\uff0c\u5728\u7f51\u4e0a\u67e5\u4e86\u5f88\u4e45\uff0c\u4e5f\u6ca1\u6709\u627e\u5230\u76f8\u5173\u7684\u89e3\u51b3\u65b9\u6848\u3002\u6ca1\u89e3\u51b3\u65b9\u6848\uff0c \u5c31\u5f97\u53d1\u6325\u54b1DIY\u7684\u7cbe\u795e\uff0c\u81ea\u5df1\u60f3\u6cd5\u89e3\u51b3\uff0c\u5206\u6790\u4e86BUG\uff0c\u7406\u4e86\u7406\u601d\u8def\uff0c\u7ed3\u5408\u524d\u6bb5\u65f6\u95f4\u6211\u505a\u5f39\u51fa\u7a97\u53e3\u7279\u6548\u7684\u65b9\u6cd5\uff0c\u89e3\u51b3\u4e86Jquery.LazyLoad.js\u7684 \u517c\u5bb9\u95ee\u9898\uff0c\u73b0\u5c06\u601d\u8def\u548c\u65b9\u6cd5\u4e0e\u5927\u5bb6\u5206\u4eab\u4e00\u4e0b\u3002<\/p>\n

\u89e3\u51b3\u601d\u8def\u5927\u81f4\u662f\u4e24\u70b9\uff0c\u4e00\u662f\u4eceLazyLoad\u672c\u8eab\u7684\u6ee4\u955c\u53c2\u6570\u4e0b\u624b\uff0c\u53d1\u73b0\u6709\u4e00\u4e2a\u53c2\u6570\u5728IE6\u548c IE7\u662f\u53ef\u4ee5\u7528\u7684\uff0c\u5c31\u662fshow\uff0c\u90a3\u4e48\u5728IE6\u548cIE7\u4e0b\u7528\u8fd9\u4e2a\u7279\u6548\uff1b\u4e8c\u662fIE8\u4ee5\u4e0a\uff08\u5305\u62ecIE8\uff09\u3001FireFox\uff0cChrome\u7b49\u975eIE\u6838\u5fc3\u7684\u6d4f\u89c8\u5668 \u5bf9fadeIn\u7279\u6548\u90fd\u652f\u6301\uff0c\u90a3\u4e48\u5728\u8fd9\u4e9b\u7248\u672c\u7684\u6d4f\u89c8\u5668\u4e2d\u5c31\u4f7f\u7528\u8fd9\u79cd\u9177\u9177\u7684\u7279\u6548\u3002<\/p>\n

\u601d\u8def\u51fa\u6765\u4e86\uff0c\u5c31\u60f3\u529e\u6cd5\u89e3\u51b3\uff1a<\/p>\n

<\/strong>1\u3001\u9996\u5148\u7528JQ\u5224\u65ad\u6d4f\u89c8\u5668\u7c7b\u578b\u53ca\u7248\u672c\uff0c\u5982\u679c\u662fIE8\u4ee5\u4e0b\u7684\u6d4f\u89c8\u5668\u5c31\u7528effect=show\uff0c\u5426\u5219\u5c31\u7528effect=fadeIn\uff0c\u5224\u65ad\u6d4f\u89c8\u5668\u7248\u672c\u51fd\u6570\u5982\u4e0b\uff1a<\/p>\n

\u4ee3\u7801\u5982\u4e0b:<\/div>\n
\nfunction checkbrowse() {
\nvar ua = navigator.userAgent.toLowerCase();
\nvar is = (ua.match(\/b(chrome|opera|safari|msie|firefox)b\/) || [”, ‘mozilla’])[1];
\nvar r = ‘(?:’ + is + ‘|version)[\/: ]([d.]+)’;
\nvar v = (ua.match(new RegExp(r)) || [])[1];
\njQuery.browser.is = is;
\njQuery.browser.ver = v;
\nreturn {
\n‘is’: jQuery.browser.is,
\n‘ver’: jQuery.browser.ver
\n}
\n}<\/div>\n

\u6211\u662f\u5c06\u4ee5\u4e0a\u7684\u4ee3\u7801\u52a0\u5165\u4e86JQ\u5305\u91cc\uff0c\u65b9\u4fbf\u4ee5\u540e\u4f7f\u7528\uff0c\u8def\u5f84\u662fhttp:\/\/demo.jb51.net\/js\/2011\/lazyload\/Js\/lazyload\/jquery.js\u3002<\/p>\n

2\u3001\u6539\u9020Jquery.LazyLoad.js\u51fd\u6570\uff0c\u6839\u636e\u6d4f\u89c8\u5668\u7248\u672c\u6765\u663e\u793a\u4e0d\u540c\u7684\u6ee4\u955c\u6548\u679c\uff1a<\/p>\n

\u4ee3\u7801\u5982\u4e0b:<\/div>\n
\nvar public = checkbrowse();
\nvar showeffect = “”;
\nif ((public[‘is’] == ‘msie’ && public[‘ver’] < 8.0)) {
\nshoweffect = “show”
\n} else {
\nshoweffect = “fadeIn”
\n}
\njQuery(document).ready(function($) {
\n$(“img”).lazyload({
\nplaceholder: “http:\/\/demo.jb51.net\/js\/2011\/lazyload\/Js\/lazyload\/grey.gif”,
\neffect: showeffect,
\nfailurelimit: 10
\n})
\n});<\/div>\n

Jquery.LazyLoad.js\u4f7f\u7528\u65b9\u6cd5\uff1a
\n1\u3001\u5c06\u4ee5\u4e0b\u6587\u4ef6\u5b58\u653e\u5728\u540c\u4e00\u76ee\u5f55\u4e0b\u9762\uff1a
\njquery.js
\njquery.layzload.js
\ngrey.gif
\n2\u3001\u5728\u9700\u8981\u4f7f\u7528\u7279\u6548\u7684\u5730\u65b9\u52a0\u4e0a\u5982\u4e0b\u7684\u4ee3\u7801\uff1a
\n<script type=”text\/javascript” src=”http:\/\/demo.jb51.net\/js\/2011\/lazyload\/Js\/lazyload\/jquery.js”><\/script>
\n<script type=”text\/javascript” src=”http:\/\/demo.jb51.net\/js\/2011\/lazyload\/Js\/lazyload\/jquery.lazyload.js”><\/script><\/p>\n

Jquery.LazyLoad.js\u63d2\u4ef6\u4fee\u6b63\u7248\u4e0b\u8f7d\uff1a
\nlazyload.rar<\/a>
\nJquery.LazyLoad.js\u63d2\u4ef6\u53c2\u6570\u8be6\u89e3\uff1a
\n<\/strong>\u4e0b\u9762\u5bf9LazyLoad\u63d2\u4ef6\u7684\u4e00\u4e9b\u53c2\u6570\u8fdb\u884c\u8bf4\u660e\uff0c\u4f9b\u4f7f\u7528\u8005\u505a\u51fa\u66f4\u8d34\u5207\u7684\u6548\u679c\u3002<\/p>\n

1,\u7528\u56fe\u7247\u63d0\u524d\u5360\u4f4d
\nplaceholder : “img\/grey.gif”,
\n\u53c2\u6570: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<\/p>\n

2,\u8f7d\u5165\u4f7f\u7528\u4f55\u79cd\u6548\u679c
\neffect : “fadeIn”,
\n\u53c2\u6570\uff1aeffect(\u7279\u6548),\u503c\u6709show(\u76f4\u63a5\u663e\u793a),fadeIn(\u6de1\u5165),slideDown(\u4e0b\u62c9)\u7b49,\u5e38\u7528fadeIn<\/p>\n

3,\u63d0\u524d\u5f00\u59cb\u52a0\u8f7d
\nthreshold : 200,
\n\u53c2\u6570: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.<\/p>\n

4,\u4e8b\u4ef6\u89e6\u53d1\u65f6\u624d\u52a0\u8f7d
\nevent : “click”,
\n\u53c2\u6570:event,\u503c\u6709click(\u70b9\u51fb),mouseover(\u9f20\u6807\u5212\u8fc7),sporty(\u8fd0\u52a8\u7684),foobar(\u2026).\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\u2026<\/p>\n

5,\u5bf9\u67d0\u5bb9\u5668\u4e2d\u7684\u56fe\u7247\u5b9e\u73b0\u6548\u679c
\ncontainer: $(“#container”),
\n\u53c2\u6570: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<\/p>\n

6,\u56fe\u7247\u6392\u5e8f\u6df7\u4e71\u65f6
\nfailurelimit : 10,
\n\u53c2\u6570: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,\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.<\/p>\n","protected":false},"excerpt":{"rendered":"

\u4ece\u7f51\u4e0a\u4e0b\u8f7d\u6765\u7684\u7248\u672c\u591a\u591a\u5c11\u5c11\u90fd\u6709\u4e9bBUG\uff0c\u5c24\u5176\u662f\u52a0\u8f7d\u540e\u5728IE6\u548cIE7\u4e0b\u56fe\u7247\u95ea\u52a8\u662f\u4e2a\u5927\u95ee\u9898\uff0c\u5728\u7f51\u4e0a\u67e5\u4e86\u5f88\u4e45\uff0c\u4e5f\u6ca1 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-280","post","type-post","status-publish","format-standard","hentry","category-javascript"],"_links":{"self":[{"href":"https:\/\/www.siediyer.cn\/index.php?rest_route=\/wp\/v2\/posts\/280","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.siediyer.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.siediyer.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.siediyer.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.siediyer.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=280"}],"version-history":[{"count":1,"href":"https:\/\/www.siediyer.cn\/index.php?rest_route=\/wp\/v2\/posts\/280\/revisions"}],"predecessor-version":[{"id":462,"href":"https:\/\/www.siediyer.cn\/index.php?rest_route=\/wp\/v2\/posts\/280\/revisions\/462"}],"wp:attachment":[{"href":"https:\/\/www.siediyer.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=280"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.siediyer.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=280"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.siediyer.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=280"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}