{"id":1836,"date":"2014-07-27T16:01:25","date_gmt":"2014-07-27T16:01:25","guid":{"rendered":"http:\/\/musilda.cz\/?p=1836"},"modified":"2014-07-27T16:01:25","modified_gmt":"2014-07-27T16:01:25","slug":"jak-na-lazy-load-obrazku-ve-wordpressu","status":"publish","type":"post","link":"https:\/\/affinite.io\/cs\/jak-na-lazy-load-obrazku-ve-wordpressu\/","title":{"rendered":"Jak na Lazy Load obr\u00e1zk\u016f ve WordPressu"},"content":{"rendered":"

Lazy load je postup, p\u0159i kter\u00e9m na\u010d\u00edt\u00e1 va\u0161e webov\u00e1 str\u00e1nka obr\u00e1zky a\u017e pot\u00e9, co se maj\u00ed zobrazit. V\u00fdhodn\u00e9 je to p\u0159i del\u0161\u00ed str\u00e1nce, kdy\u017e se m\u00e1 na\u010d\u00edst t\u0159eba \u010dty\u0159icet obr\u00e1zk\u016f. Str\u00e1nka se pak na\u010d\u00edt\u00e1 ne\u00fam\u011brn\u011b dlouho a u\u017eivatel m\u016f\u017ee odej\u00edt. V tomto \u010dl\u00e1nku si uk\u00e1\u017eeme, jak Lazy load jednodu\u0161e pou\u017e\u00edt ve va\u0161\u00ed \u0161ablon\u011b.<\/p>\n

Co budeme pot\u0159ebovat?<\/h3>\n

Sta\u010d\u00ed jQuery, kter\u00fd u\u017e stejn\u011b v\u011bt\u0161ina WordPress \u0161ablon pou\u017e\u00edv\u00e1 a jQuery plugin jquery_lazyload, kter\u00fd najdete zde<\/a>.<\/p>\n

1.<\/h3>\n

Jako prvn\u00ed pomoc\u00ed\u00a0wp_register_script a\u00a0wp_enqueue_script na\u010dteme jQuery plugin.<\/p>\n

2.<\/h3>\n

V druh\u00e9m kroku vytvo\u0159\u00edme buffer a jeho callback funkci. Zav\u011bs\u00edme do init akce.<\/p>\n

\nadd_action('init', 'buffer_start');\nfunction buffer_start() {\n   ob_start(\"my_callback\");\n}\nfunction my_callback($buffer) {\n   return $buffer;\n}\n<\/pre>\n
3.<\/h3>\n
V dal\u0161\u00edm kroku vytvo\u0159\u00edme funkci, kter\u00e1 projde obsah str\u00e1nky a nahrad\u00ed v\u0161echny obr\u00e1zky jednopixelov\u00fdm gifem. Z\u00e1rove\u0148 p\u0159id\u00e1 do ka\u017ed\u00e9ho obr\u00e1zku css t\u0159\u00eddu lazy.
\nPokud nev\u00edte, co znamen\u00e1 tento \u0159et\u011bztec:
\nR0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7
\njde pr\u00e1v\u011b o postup, jak vytvo\u0159it jednopixelov\u00fd gif. Pro inspiraci odkaz na \u010dl\u00e1nek z Css Tricks<\/a>.<\/p>\n
\n   function content_filter( $content ) {\n\t$matches = array();\n\tpreg_match_all( '\/\/', $content, $matches );\n\n\t$search = array();\n\t$replace = array();\n\n        foreach ( $matches[0] as $image ) {\n\n\t$replace = preg_replace( '\/<img(.*?)src=\/i',\n'<img$1src="data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"\ndata-original=', $image );\n\nif ( preg_match( '\/class=["\\']\/i', $replace ) ) {\n$replace = preg_replace( '\/class=(["\\'])(.*?)["\\']\/i', 'class=$1lazy $2$1', $replace );\n} else {\n$replace = preg_replace( '\/<img\/i', '<img class="lazy"', $replace );\n    \t\t}\n\n$replace .= '' . $image . '';\n\narray_push( $search, $image );\narray_push( $replace, $replace );\n\n        }\n\n$content = str_replace( $search, $replace, $content );\n\nreturn $content;\n\n   }\n<\/pre>\n
4.<\/h3>\n
Jako posledn\u00ed vytvo\u0159\u00edme funkci pro vypr\u00e1zdn\u011bn\u00ed bufferu a um\u00edst\u00edme ji do wp_head.<\/p>\n
\nadd_action('wp_footer', 'buffer_end');\nfunction buffer_end() {\n  $content = ob_get_clean();\n  echo content_filter($content);\n}\n<\/pre>\n
A to je v\u0161e.
\nT\u011b\u0161\u00edm se u dal\u0161\u00edho \u010dl\u00e1nku.<\/p>\n","protected":false},"excerpt":{"rendered":"
Lazy load je postup, p\u0159i kter\u00e9m na\u010d\u00edt\u00e1 va\u0161e webov\u00e1 str\u00e1nka obr\u00e1zky a\u017e pot\u00e9, co se maj\u00ed zobrazit. V\u00fdhodn\u00e9 je to p\u0159i del\u0161\u00ed str\u00e1nce, kdy\u017e se m\u00e1 na\u010d\u00edst t\u0159eba \u010dty\u0159icet obr\u00e1zk\u016f. Str\u00e1nka se pak na\u010d\u00edt\u00e1 ne\u00fam\u011brn\u011b dlouho a u\u017eivatel m\u016f\u017ee odej\u00edt. V tomto \u010dl\u00e1nku si uk\u00e1\u017eeme, jak Lazy load jednodu\u0161e pou\u017e\u00edt ve va\u0161\u00ed \u0161ablon\u011b. Co budeme<\/p>\n","protected":false},"author":1,"featured_media":1484,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,30],"tags":[499],"class_list":["post-1836","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-navody","category-wordpress","tag-wordpress-lazy-load"],"_links":{"self":[{"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/posts\/1836"}],"collection":[{"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/comments?post=1836"}],"version-history":[{"count":0,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/posts\/1836\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/media\/1484"}],"wp:attachment":[{"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/media?parent=1836"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/categories?post=1836"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/tags?post=1836"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}