Pixel perfect responsive images on every device. THX to the Google cache ใท
- Retina ready
- Pixelated placeholder
- Lazyloading
- Works with images and background images
2.3.0
- [jQuery]
<img data-respio-img="http://dev.janwagner-design.de/respio/image.jpg">
We need to remove the src attribute of your image and replace it by a new custom data attribute to prevent it from loading. Your images should have a max-width of 100% and should also be wider than your content/container.
function googleProxy(width, refresh, url) {
return 'https://images1-focus-opensocial.googleusercontent.com/gadgets/proxy'
+ '?container=focus'
+ '&refresh=' + refresh
+ '&resize_w=' + width
+ '&url=' + url
;
}
$(window).on('load', respio);
$(window).on('scroll', respio);
function googleProxy(width, refresh, url) {
return 'https://images1-focus-opensocial.googleusercontent.com/gadgets/proxy'
+ '?container=focus'
+ '&refresh=' + refresh
+ '&resize_w=' + width
+ '&url=' + url
;
}
function respio() {
var windowBottom = $(window).scrollTop() + $(window).height();
$.each($('img[data-respio-src]'), function(i, img) {
var $img = $(img);
if($img.attr('src', '')) {
var thumbUrl = googleProxy(10, 604800, $img.data('respio-src'));
$img.attr('src', thumbUrl);
}
setTimeout(function() {
var imgTop = $img.offset().top;
if(imgTop >= windowBottom * 1.5) { return; }
var devicePixelRatio = (window.devicePixelRatio > 1) ? window.devicePixelRatio : 1;
var imgWidth = $img.parent().width() * devicePixelRatio;
var originUrl = $img.data('respio-src');
var originImgUrl = googleProxy(imgWidth, 604800, originUrl);
var $originImg = $('<img/>').hide().appendTo($('body'));
var isLoaded = false;
var isResized = false;
var originImg = $originImg.get(0);
originImg.onload = function() { isLoaded = true; };
originImg.src = originImgUrl;
var waitInterval = setInterval(function() {
if (isLoaded) {
clearInterval(waitInterval);
$img.attr('src', originImgUrl);
$originImg.remove();
$img.removeAttr('data-respio-src');
$img.css('height', '');
}
}, 0);
}, 0);
});
}
<div data-respio-bg="http://dev.janwagner-design.de/respio/image.jpg" width="xxx" height="xxx"></div>
$(window).on('load', respio);
$(window).on('scroll', respio);
function googleProxy(width, refresh, url) {
return 'https://images1-focus-opensocial.googleusercontent.com/gadgets/proxy'
+ '?container=focus'
+ '&refresh=' + refresh
+ '&resize_w=' + width
+ '&url=' + url
;
}
function respio() {
var windowBottom = $(window).scrollTop() + $(window).height();
$.each($('[data-respio-bg]'), function(i, img) {
var $img = $(img);
var thumbUrl = googleProxy(10, 604800, $img.data('respio-bg'));
$img.css('background-image', 'url(' + thumbUrl + ')');
setTimeout(function() {
var imgTop = $img.offset().top;
if(imgTop >= windowBottom * 1.5) { return; }
var devicePixelRatio = (window.devicePixelRatio > 1) ? window.devicePixelRatio : 1;
var imgWidth = $img.parent().width() * devicePixelRatio;
var originUrl = $img.data('respio-bg');
var originImgUrl = googleProxy(imgWidth, 604800, originUrl);
var $originImg = $('<img/>').hide().appendTo($('body'));
var isLoaded = false;
var isResized = false;
var originImg = $originImg.get(0);
originImg.onload = function() { isLoaded = true; };
originImg.src = originImgUrl;
var waitInterval = setInterval(function() {
if (isLoaded) {
clearInterval(waitInterval);
$img.css('background-image', 'url(' + originImgUrl + ')');
$originImg.remove();
$img.removeAttr('data-respio-bg');
$img.css('height', '');
}
}, 0);
}, 0);
});
}