Сочетание lazysizes с WebP

Чтобы очистить хэш-цель ссылкой без использования Javascript, вы можете просто сделать еще один тег с href="#".

Простой пример: http://jsfiddle.net/ Y5XB7 / Нажмите на верхний черный квадрат, чтобы :target был активным, затем нажмите на нижний черный квадрат, чтобы очистить его.

 ... 

1
задан Sam Johnson 17 January 2019 в 12:19
поделиться

1 ответ

У вас неправильный тип пантомимы, определенный на одном изображении (менее критичный), но основная проблема заключается в том, что вы должны использовать data-srcset вместо srcset .

Рабочий пример

header {
  height: 100vh;
  display: block;
}
<head>
	<script src="https://cdn.shopify.com/s/files/1/0020/2188/3959/files/lazy.min.js?8183633505407522177" async=""></script>
</head>

<body>
	<header>
		<p>Scroll Down</p>
	</header>
	<div style="height:2000px;">...</div>
<picture>
	<source type="image/webp" data-srcset="https://cdn.shopify.com/s/files/1/0020/2188/3959/files/stripe.webp" />
	<source type="image/png" data-srcset="https://cdn.shopify.com/s/files/1/0020/2188/3959/files/stripe.png" />
	<img class="lazyload" data-src="https://cdn.shopify.com/s/files/1/0020/2188/3959/files/stripe.png" alt="image" />
</picture>
</body>

0
ответ дан dev101 17 January 2019 в 12:19
поделиться
Другие вопросы по тегам:

Похожие вопросы: