1.0.5 • Published 7 years ago
progressive-images v1.0.5
Progressive uploading images to Vanilla Js.
css
Add css to project
.progressive-img {
filter: blur(15px);
transform: scale(1.05);
width: 100%;
}
.progressive-img-state-loaded {
filter: none;
transform: scale(1);
}
or include /src/progressive-load.css
html
Different images depending on the screen resolution.
<picture class="js-progressive-img">
<!-- tablet image -->
<source
media="(min-width: 600px) and (max-width: 768px)"
srcset="/assets/images/1-tablet-thumbnail.jpg"
data-srcset="/assets/images/1-tablet.jpg"
>
<!-- phone image -->
<source
media="(max-width: 600px)"
srcset="/assets/images/1-mobile-thumbnail.jpg"
data-srcset="/assets/images/1-mobile.jpg"
>
<!-- desctop image -->
<img
src="/assets/images/1-thumbnail.jpg"
data-srcset="/assets/images/1.jpg"
class="progressive-img"
>
</picture>
Images for mobile version and desktop.
<picture class="js-progressive-img">
<!-- phone image -->
<source
media="(max-width: 600px)"
srcset="/assets/images/2-mobile-thumbnail.jpg"
data-srcset="/assets/images/2-mobile.jpg"
>
<!-- desctop image -->
<img
src="/assets/images/2-thumbnail.jpg"
data-srcset="/assets/images/2.jpg"
class="progressive-img"
>
</picture>
One image for all resolutions.
<picture class="js-progressive-img">
<img
src="/assets/images/3-thumbnail.jpg"
data-srcset="/assets/images/3.jpg"
class="progressive-img"
>
</picture>
js
as a module
import ProgressiveLoad from 'progressive-load';
const progresseiveLoadImages = new ProgressiveLoad({
pictureTagClassName: 'js-progressive-img',
pictureLoadedClassName: 'progressive-img-state-loaded',
mediaQueries: ['(max-width: 600px)', '(min-width: 600px) and (max-width: 768px)'],
fullImageDataAttribute: 'srcset',
});
//ajax loaded images
progresseiveLoadImages.update()
or donwload /public/global.min.js and included in html
<script src="global.min.js"></script>
<script>
var progresseiveLoadImages = new ProgressiveLoad({
pictureTagClassName: 'js-progressive-img',
pictureLoadedClassName: 'progressive-img-state-loaded',
mediaQueries: ['(max-width: 600px)', '(min-width: 600px) and (max-width: 768px)'],
fullImageDataAttribute: 'srcset'
});
//ajax loaded images
progresseiveLoadImages.update()
</script>