Skip to content

Commit

Permalink
Add lazy load + webp support
Browse files Browse the repository at this point in the history
  • Loading branch information
@firstred
firstred committed Jan 19, 2018
1 parent d8e3f04 commit bf7d101
Show file tree
Hide file tree
Showing 8 changed files with 52 additions and 46 deletions.
4 changes: 2 additions & 2 deletions category.tpl
View file
Expand Up @@ -10,8 +10,8 @@
<section id="category-info">
{if $category->id_image}
<div id="category-banner">
<img class="img-responsive"
src="{$link->getCatImageLink($category->link_rewrite, $category->id_image, 'category_default')|escape:'html':'UTF-8'}"
<img class="img-responsive{if !empty($lazy_load)} tb-lazy-image{/if}"
{if !empty($lazy_load)}data-{/if}src="{$link->getCatImageLink($category->link_rewrite, $category->id_image, 'category_default')|escape:'html':'UTF-8'}"
alt="{$category->name|escape:'html':'UTF-8'}" title="{$category->name|escape:'html':'UTF-8'}">
</div>
{/if}
Expand Down
2 changes: 2 additions & 0 deletions config.xml
View file
Expand Up @@ -330,4 +330,6 @@
suppliers="false" scenes="true"/>
</images>
<lazy_load>1</lazy_load>
<high_dpi>1</high_dpi>
<webp>1</webp>
</theme>
16 changes: 11 additions & 5 deletions header.tpl
View file
Expand Up @@ -32,13 +32,19 @@
{if $css_uri == 'lteIE9'}
<!--[if lte IE 9]>
{foreach from=$css_files[$css_uri] key=css_uriie9 item=mediaie9}
<link rel="stylesheet" href="{$css_uriie9|escape:'html':'UTF-8'}" type="text/css"
media="{$mediaie9|escape:'html':'UTF-8'}"/>
<link rel="stylesheet"
href="{$css_uriie9|escape:'html':'UTF-8'}"
type="text/css"
media="{$mediaie9|escape:'html':'UTF-8'}"
/>
{/foreach}
<![endif]-->
{else}
<link rel="stylesheet" href="{$css_uri|escape:'html':'UTF-8'}" type="text/css"
media="{$media|escape:'html':'UTF-8'}"/>
<link rel="stylesheet"
href="{$css_uri|escape:'html':'UTF-8'}"
type="text/css"
media="{$media|escape:'html':'UTF-8'}"
/>
{/if}
{/foreach}
{/if}
Expand All @@ -51,7 +57,7 @@
{$HOOK_HEADER}
<!--[if IE 8]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js" async></script>
<![endif]-->
</head>
<body{if isset($page_name)} id="{$page_name|escape:'html':'UTF-8'}"{/if}
Expand Down
4 changes: 3 additions & 1 deletion js/autoload/30-lazyload.js
View file
Expand Up @@ -39,7 +39,9 @@
function fetchImage(src, srcset, callback) {
var image = new Image();
image.src = src;
image.srcset = srcset;
if (srcset) {
image.srcset = srcset;
}
image.onload = callback.resolve;
image.onerror = callback.reject;
}
Expand Down
23 changes: 0 additions & 23 deletions js/global.js
View file
Expand Up @@ -43,12 +43,9 @@ var PrestaShop = (function() {
})();

$(function() {

var touch = !!isTouchDevice();
$('body').toggleClass('touch', touch).toggleClass('no-touch', !touch);

highdpiInit();

if (typeof quickView !== 'undefined' && quickView) {
quick_view();
}
Expand Down Expand Up @@ -112,28 +109,8 @@ $(function() {
prev: '<a title="' + FancyboxI18nPrev + '" class="fancybox-nav fancybox-prev" href="javascript:;"><span></span></a>'
});
}

});

function highdpiInit() {
if (typeof highDPI === 'undefined') {
return;
}

if (highDPI && $('.replace-2x').css('font-size') == '1px') {
var els = $('img.replace-2x').get();
for (var i = 0; i < els.length; i++) {
src = els[i].src;
extension = src.substr((src.lastIndexOf('.') + 1));
src = src.replace('.' + extension, '2x.' + extension);

var img = new Image();
img.src = src;
els[i].src = img.height != 0 ? src : els[i].src;
}
}
}

function quick_view() {
$(document).on('click', '.quick-view', function(e) {
e.preventDefault();
Expand Down
7 changes: 6 additions & 1 deletion modules/homeslider/homeslider.tpl
View file
Expand Up @@ -7,7 +7,12 @@
{if $slide.active}
<li class="homeslider-container">
<a href="{$slide.url|escape:'html':'UTF-8'}" title="{$slide.legend|escape:'html':'UTF-8'}">
<img class="img-responsive" src="{$link->getMediaLink("`$smarty.const._MODULE_DIR_`homeslider/images/`$slide.image|escape:'htmlall':'UTF-8'`")}"{if isset($slide.size) && $slide.size} {$slide.size}{else} width="100%" height="100%"{/if} alt="{$slide.legend|escape:'htmlall':'UTF-8'}" />
<img class="img-responsive{if !empty($lazy_load)} tb-lazy-image{/if}"
{if !empty($lazy_load)}data-{/if}src="{$link->getMediaLink("`$smarty.const._MODULE_DIR_`homeslider/images/`$slide.image|escape:'htmlall':'UTF-8'`")}"
{if !empty($lazy_load)}src=""{/if}
{if isset($slide.size) && $slide.size} {$slide.size}{else} width="100%" height="100%"{/if}
alt="{$slide.legend|escape:'htmlall':'UTF-8'}"
/>
</a>
{if isset($slide.description) && trim($slide.description) != ''}
<div class="homeslider-wrapper hid1den-xs">
Expand Down
15 changes: 7 additions & 8 deletions product-list-item.tpl
View file
Expand Up @@ -4,12 +4,12 @@
<a class="product_img_link" href="{$product.link|escape:'html':'UTF-8'}"
title="{$product.name|escape:'html':'UTF-8'}" itemprop="url">
<img class="{if $lazy_load}tb-lazy-image {/if}replace-2x img-responsive center-block"
{if $lazy_load}data-src{else}src{/if}="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')|escape:'html':'UTF-8'}"
{if $lazy_load}data-srcset{else}srcset{/if}="
{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default_smallest')|escape:'html':'UTF-8'} 211w,
{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default_smaller')|escape:'html':'UTF-8'} 218w,
{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')|escape:'html':'UTF-8'} 250w
"
{if !empty($lazy_load)}src="" srcset=""{/if}
{if !empty($lazy_load)}data-{/if}src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')|escape:'html':'UTF-8'}{if !empty($webp)}.webp{/if}"
{if !empty($lazy_load)}data-{/if}srcset="
{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default_smallest')|escape:'html':'UTF-8'}{if !empty($webp)}.webp{/if} 211w,
{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default_smaller')|escape:'html':'UTF-8'}{if !empty($webp)}.webp{/if} 218w,
{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')|escape:'html':'UTF-8'}{if !empty($webp)}.webp{/if} 250w"
sizes="(min-width: 1200px) 250px, (min-width: 992px) 218px, (min-width: 768px) 211px, 250px"
alt="{if !empty($product.legend)}{$product.legend|escape:'html':'UTF-8'}{else}{$product.name|escape:'html':'UTF-8'}{/if}"
title="{if !empty($product.legend)}{$product.legend|escape:'html':'UTF-8'}{else}{$product.name|escape:'html':'UTF-8'}{/if}"
Expand Down Expand Up @@ -38,8 +38,7 @@
{displayWtPrice p=$product.price_without_reduction}
</span>
{if $product.specific_prices.reduction_type == 'percentage'}
<span class="price-percent-reduction">-{$product.specific_prices.reduction * 100}
%</span>
<span class="price-percent-reduction">-{$product.specific_prices.reduction * 100} %</span>
{/if}
{/if}
{if $PS_STOCK_MANAGEMENT && isset($product.available_for_order) && $product.available_for_order && !isset($restricted_country_mode)}
Expand Down
27 changes: 21 additions & 6 deletions product.tpl
View file
Expand Up @@ -52,16 +52,31 @@

{if $have_image}
<span id="view_full_size">
<img id="bigpic" class="img-responsive center-block" itemprop="image" src="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'large_default')|escape:'html':'UTF-8'}" title="{if !empty($cover.legend)}{$cover.legend|escape:'html':'UTF-8'}{else}{$product->name|escape:'html':'UTF-8'}{/if}" alt="{if !empty($cover.legend)}{$cover.legend|escape:'html':'UTF-8'}{else}{$product->name|escape:'html':'UTF-8'}{/if}" width="{$largeSize.width}" height="{$largeSize.height}"/>
<img id="bigpic"
class="img-responsive center-block{if !empty($lazy_load)} tb-lazy-image{/if}"
itemprop="image"
{if !empty($lazy_load)}data-{/if}src="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'large_default')|escape:'html':'UTF-8'}{if !empty($webp)}.webp{/if}"
title="{if !empty($cover.legend)}{$cover.legend|escape:'html':'UTF-8'}{else}{$product->name|escape:'html':'UTF-8'}{/if}"
alt="{if !empty($cover.legend)}{$cover.legend|escape:'html':'UTF-8'}{else}{$product->name|escape:'html':'UTF-8'}{/if}"
width="{$largeSize.width}"
height="{$largeSize.height}"
/>
{if !$jqZoomEnabled && !$content_only}
<span class="span_link" title="{l s='Zoom in'}">
<i class="icon icon-search-plus"></i>
</span>
<i class="icon icon-search-plus"></i>
</span>
{/if}
</span>
{else}
<span id="view_full_size">
<img id="bigpic" class="img-responsive center-block" itemprop="image" src="{$img_prod_dir}{$lang_iso}-default-large_default.jpg" title="{$product->name|escape:'html':'UTF-8'}" width="{$largeSize.width}" height="{$largeSize.height}"/>
<img id="bigpic"
class="img-responsive center-block{if !empty($lazy_load)} tb-lazy-image{/if}"
itemprop="image"
{if !empty($lazy_load)}data-{/if}src="{$img_prod_dir}{$lang_iso}-default-large_default.jpg{if !empty($webp)}.webp{/if}"
title="{$product->name|escape:'html':'UTF-8'}"
width="{$largeSize.width}"
height="{$largeSize.height}"
/>
</span>
{/if}
</div>
Expand All @@ -83,11 +98,11 @@
<li data-slide-num="{$smarty.foreach.thumbnails.iteration|intval}" id="thumbnail_{$image.id_image}" class="col-xs-6 col-sm-4 col-md-3">
{if $jqZoomEnabled && $have_image && !$content_only}
<a href="{$link->getImageLink($product->link_rewrite, $imageIds, 'thickbox_default')|escape:'html':'UTF-8'}" class="thumbnail {if $image.id_image == $cover.id_image} shown{/if}" title="{$imageTitle}">
<img class="img-responsive" id="thumb_{$image.id_image}" src="{$link->getImageLink($product->link_rewrite, $imageIds, 'cart_default')|escape:'html':'UTF-8'}" alt="{$imageTitle}" title="{$imageTitle}"{if isset($cartSize)} height="{$cartSize.height}" width="{$cartSize.width}"{/if} itemprop="image" />
<img class="img-responsive" id="thumb_{$image.id_image}" src="{$link->getImageLink($product->link_rewrite, $imageIds, 'cart_default')|escape:'html':'UTF-8'}{if !empty($webp)}.webp{/if}" alt="{$imageTitle}" title="{$imageTitle}"{if isset($cartSize)} height="{$cartSize.height}" width="{$cartSize.width}"{/if} itemprop="image" />
</a>
{else}
<a href="{$link->getImageLink($product->link_rewrite, $imageIds, 'thickbox_default')|escape:'html':'UTF-8'}" data-fancybox-group="other-views" class="thumbnail fancybox{if $image.id_image == $cover.id_image} shown{/if}" title="{$imageTitle}">
<img class="img-responsive" id="thumb_{$image.id_image}" src="{$link->getImageLink($product->link_rewrite, $imageIds, 'cart_default')|escape:'html':'UTF-8'}" alt="{$imageTitle}" title="{$imageTitle}"{if isset($cartSize)} height="{$cartSize.height}" width="{$cartSize.width}"{/if} itemprop="image" />
<img class="img-responsive" id="thumb_{$image.id_image}" src="{$link->getImageLink($product->link_rewrite, $imageIds, 'cart_default')|escape:'html':'UTF-8'}{if !empty($webp)}.webp{/if}" alt="{$imageTitle}" title="{$imageTitle}"{if isset($cartSize)} height="{$cartSize.height}" width="{$cartSize.width}"{/if} itemprop="image" />
</a>
{/if}
</li>
Expand Down

0 comments on commit bf7d101

Please sign in to comment.