{"id":1985,"date":"2014-09-24T11:27:38","date_gmt":"2014-09-24T11:27:38","guid":{"rendered":"http:\/\/musilda.cz\/?p=1985"},"modified":"2014-09-24T11:27:38","modified_gmt":"2014-09-24T11:27:38","slug":"lazy-loading-nahledovych-obrazku","status":"publish","type":"post","link":"https:\/\/affinite.io\/cs\/lazy-loading-nahledovych-obrazku\/","title":{"rendered":"Lazy loading n\u00e1hledov\u00fdch obr\u00e1zk\u016f"},"content":{"rendered":"

Rychlost na\u010d\u00edt\u00e1n\u00ed WordPress \u0161ablon je pom\u011brn\u011b problematick\u00e1 z\u00e1le\u017eitost. Takov\u00e9 jednor\u00e1zov\u00e9 doporu\u010den\u00ed je v\u011bt\u0161inou pou\u017e\u00edt cache plugin. Cht\u011bl bych se ale dnes zm\u00ednit o Lazy loadingu obr\u00e1zk\u016f a jeho pou\u017eit\u00ed v \u0161ablon\u011b. Tento postup umo\u017e\u0148uje nenahr\u00e1vat v\u0161echny obr\u00e1zky p\u0159i na\u010d\u00edt\u00e1n\u00ed str\u00e1nky, ale pouze ty, kter\u00e9 jsou vid\u011bt na obrazovce.<\/p>\n

P\u0159edstavte si situaci, kdy p\u0159ijdete na internetov\u00fd magaz\u00edn, na\u010d\u00edt\u00e1 se cela \u0159ada n\u00e1hledov\u00fdch obr\u00e1zk\u016f, ke kter\u00fdm teprve srolujete.<\/p>\n

Pomoc\u00ed lazy ladingu se obr\u00e1zky na\u010dtou, a\u017e budou pot\u0159eba. V\u00edce o Lazy loadingu na blogu Vzh\u016frudol\u016f.cz<\/a>.<\/p>\n

Pro postupn\u00e9 na\u010d\u00edt\u00e1n\u00ed obr\u00e1zk\u016f jsem zvolil script Unveil, kter\u00fd naleznete zde<\/a>. V podstat\u011b v\u00e1m sta\u010d\u00ed do \u0161ablony vlo\u017eit soubor jquery.unveil.js, ostatn\u00ed soubory, kter\u00e9 si st\u00e1hnete, nepot\u0159ebujete.<\/p>\n

Do js souboru, ve kter\u00e9m m\u00e1te jQuery funkce p\u0159idejte:<\/p>\n

\n$(document).ready(function() {\n  $(\"img\").unveil();\n});\n<\/pre>\n
A pak u\u017e v\u00e1m sta\u010d\u00ed pouze upravit tag img z:<\/p>\n
\"\"<\/pre>\n
na:<\/p>\n
\"\"<\/pre>\n
Lazy.png je obr\u00e1zek o velikosti 1px x 1px, kter\u00fdm nahrad\u00edme p\u016fvodn\u00ed obr\u00e1zek.
\nJednoduch\u00e9, \u017ee?<\/p>\n
Bohu\u017eel pro WordPress mus\u00edte upravit script, pro vykreslov\u00e1n\u00ed n\u00e1hledov\u00fdch obr\u00e1zk\u016f, tak, aby se nahrazovali automaticky.
\nVe va\u0161\u00ed \u0161ablon\u011b m\u016f\u017eete m\u00edt n\u00e1sleduj\u00edc\u00ed k\u00f3d:<\/p>\n
\nif ( has_post_thumbnail() ) :\n  the_post_thumbnail();\nendif;\n<\/pre>\n
Proto\u017ee pot\u0159ebujeme z\u00edskat url n\u00e1hledov\u00e9ho obr\u00e1zku, tu p\u0159esunout do data-src a do src vlo\u017eit jednopixelov\u00fd obr\u00e1zek, budeme muset upravit k\u00f3d n\u00e1sledovn\u011b:<\/p>\n
\nglobal $post;\nif (has_post_thumbnail( $post->ID ) ) {\n\n$src = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID),array(100, 100) );\n\n    $args = array(\n      'src'      => get_template_directory_uri(). '\/images\/lazy.png',\n      'data-src' => $src[0]\n    );\n?>\n$echo = get_the_post_thumbnail( $post->ID, array(100, 100),$args);\n\n}\n<\/pre>\n
Pomoc\u00ed get_post_thumbnail_id z\u00edsk\u00e1me id p\u0159i\u0159azen\u00e9ho obr\u00e1zku. Proto\u017ee je v origin\u00e1ln\u00ed velikosti, z\u00edsk\u00e1me url thumbnailu pomoc\u00ed wp_get_attachment_image_src, kde array() je velikost n\u00e1hledu, kter\u00e1 m\u016f\u017ee b\u00fdt zad\u00e1na i textov\u011b.
\nPomoc\u00ed t\u0159et\u00edho argumentu funkce get_post_thumbnail, zm\u011bn\u00edme src, tedy url obr\u00e1zku na na\u0161i jednopixelovou n\u00e1hradu a url thumbnailu vlo\u017e\u00edme do data-src.<\/p>\n
A to je v\u0161e. Unveil umo\u017e\u0148uje i na\u010dten\u00ed obr\u00e1zku, t\u0159eba 100 px pod hranou obrazovky, v\u0161e najdete v dokumentaci.<\/p>\n
Dopln\u011bn\u00ed:<\/strong>
\nD\u00edky Jaroslavovi za tip, k nahrazen\u00ed v\u0161ech n\u00e1hledov\u00fdch obr\u00e1zk\u016f m\u016f\u017eeme vyu\u017e\u00edt filter post_thumbnail_html.
\nPak sta\u010d\u00ed do functions.php p\u0159idat n\u00e1sleduj\u00edc\u00ed funkci:<\/p>\n
\nadd_filter( 'post__thumbnail_html', 'musilda_lazy_loading' );\n\nfunction musilda_lazy_loading($html,$post_id,$post_thumbnail_id,$size,$attr){\n\n$src = wp_get_attachment_image_src( get_post_thumbnail_id($post_id),$size );\n\n$html = '\n\nreturn $html;\n\n}\n<\/pre>\n
Netestov\u00e1no, tak\u017ee bez z\u00e1ruky.<\/p>\n","protected":false},"excerpt":{"rendered":"
Rychlost na\u010d\u00edt\u00e1n\u00ed WordPress \u0161ablon je pom\u011brn\u011b problematick\u00e1 z\u00e1le\u017eitost. Takov\u00e9 jednor\u00e1zov\u00e9 doporu\u010den\u00ed je v\u011bt\u0161inou pou\u017e\u00edt cache plugin. Cht\u011bl bych se ale dnes zm\u00ednit o Lazy loadingu obr\u00e1zk\u016f a jeho pou\u017eit\u00ed v \u0161ablon\u011b. Tento postup umo\u017e\u0148uje nenahr\u00e1vat v\u0161echny obr\u00e1zky p\u0159i na\u010d\u00edt\u00e1n\u00ed str\u00e1nky, ale pouze ty, kter\u00e9 jsou vid\u011bt na obrazovce. P\u0159edstavte si situaci, kdy p\u0159ijdete na internetov\u00fd<\/p>\n","protected":false},"author":1,"featured_media":1978,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,19],"tags":[],"class_list":["post-1985","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-navody","category-snippety"],"_links":{"self":[{"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/posts\/1985"}],"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=1985"}],"version-history":[{"count":0,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/posts\/1985\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/media\/1978"}],"wp:attachment":[{"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/media?parent=1985"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/categories?post=1985"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/tags?post=1985"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}