Backstretch.js e tamanhos de miniaturas para reduzir o tempo de carregamento

Estou usando backstretch.js para definir uma imagem em destaque como uma imagem de fundo de tamanho completo (conforme este tutorial ).

Gostaria de combinar esta abordagem com diferentes tamanhos de miniaturas para reduzir o tempo de carregamento em dispositivos móveis. Estou me perguntando como posso gerenciar isso.

Eu acho que a linha decisiva de código é a seguinte a partir de functions.php:

wp_localize_script( 'backstretch-set', 'BackStretchImg', array( 'src' => wp_get_attachment_url( get_post_thumbnail_id() ) ) ); 

Eu sei que posso combinar esse código com um tamanho de imagem, como

 wp_get_attachment_url( get_post_thumbnail_id(), 'medium' ) ) ); 

Mas eu não sei como combinar isso com mediaqueries ou uma if-query. Você tem alguma ideia?

Solutions Collecting From Web of "Backstretch.js e tamanhos de miniaturas para reduzir o tempo de carregamento"

Se você usasse as “mediaqueries”, você precisaria desativar seletivamente e habilitar os elementos DOM aos quais você aplicou diferentes imagens.

Em vez disso, eu recomendaria a aplicação condicional de imagens diferentes ao mesmo elemento, ou seja, o e mantendo a condição dentro do JS.

wp_localize_script é capaz de passar vários parâmetros para o script. Eu diria que passa vários tamanhos de imagem, assim:

 $script_parameters = array( 'small' => wp_get_attachment_image_src( get_post_thumbnail_id(), array(150, 150)), 'medium' => wp_get_attachment_image_src( get_post_thumbnail_id(), array(250, 250)), 'large' => wp_get_attachment_image_src( get_post_thumbnail_id(), array(350, 350)) ); wp_localize_script( 'backstretch-set', 'BackStretchImages', $script_parameters ); 

E, em seguida, expanda o JS por uma condição baseada na largura da canvas / exibição:

 jQuery(document).ready(function($) { var viewportWidth = $(window).width(); // same as "document.documentElement.clientWidth" (vanilla JS) if ( 768 > viewportWidth ) { $("body").backstretch([BackStretchImages.small[0]],{duration:3000,fade:750}); } else if ( 1024 > viewportWidth ) { $("body").backstretch([BackStretchImages.medium[0]],{duration:3000,fade:750}); } else { $("body").backstretch([BackStretchImages.large[0]],{duration:3000,fade:750}); } }); 

Você pode adicionar tantos tamanhos quanto desejar e ajustar os limites da janela de exibição ao seu gosto.