Permalink
Browse files

add unveil for lazy image loading

  • Loading branch information...
birarda committed Sep 11, 2016
1 parent 102663d commit 9de72a403cf9cf8b5e80e32ad8ad80d39160b094
@@ -15,6 +15,7 @@
//= require jquery_ujs
//= require turbolinks
//= require selectize
//= require jquery.unveil
//= require_tree .
$(document).on('turbolinks:load', function () {
@@ -1,15 +1,3 @@
// Place all the behaviors and hooks related to the matching controller here.
// All this logic will automatically be available in application.js.
$(document).on('turbolinks:load', function() {
var $selectized_selects = [$('#search__item_id'), $('#search__certification'), $('#search__paint_color'), $('#search__rare_class'), $('#search__platform'), $('#search__kind')]
$.each($selectized_selects, function(index, $select){
$select.selectize();
});
});
$(document).on('turbolinks:before-cache', function() {
$('.selectized').each(function() {
this.selectize.destroy();
});
$('.unveil-img').unveil();
});
@@ -0,0 +1,15 @@
// Place all the behaviors and hooks related to the matching controller here.
// All this logic will automatically be available in application.js.
$(document).on('turbolinks:load', function() {
var $selectized_selects = [$('#search__item_id'), $('#search__certification'), $('#search__paint_color'), $('#search__rare_class'), $('#search__platform'), $('#search__kind')]
$.each($selectized_selects, function(index, $select){
$select.selectize();
});
});
$(document).on('turbolinks:before-cache', function() {
$('.selectized').each(function() {
this.selectize.destroy();
});
});
@@ -21,7 +21,7 @@ p
.item-tile
.image-container.center-block
- if item.game_preview.file?
img.img-responsive.center-block src="#{item.game_preview.url}"
img.img-responsive.center-block.unveil-img data-src="#{item.game_preview.url}"
p.text-center.item-name = item.name
- if (index + 1) % 2 == 0
.clearfix.visible-xs
@@ -0,0 +1,56 @@
/**
* jQuery Unveil
* A very lightweight jQuery plugin to lazy load images
* http://luis-almeida.github.com/unveil
*
* Licensed under the MIT license.
* Copyright 2013 Luís Almeida
* https://github.com/luis-almeida
*/
;(function($) {
$.fn.unveil = function(threshold, callback) {
var $w = $(window),
th = threshold || 0,
retina = window.devicePixelRatio > 1,
attrib = retina? "data-src-retina" : "data-src",
images = this,
loaded;
this.one("unveil", function() {
var source = this.getAttribute(attrib);
source = source || this.getAttribute("data-src");
if (source) {
this.setAttribute("src", source);
if (typeof callback === "function") callback.call(this);
}
});
function unveil() {
var inview = images.filter(function() {
var $e = $(this);
if ($e.is(":hidden")) return;
var wt = $w.scrollTop(),
wb = wt + $w.height(),
et = $e.offset().top,
eb = et + $e.height();
return eb >= wt - th && et <= wb + th;
});
loaded = inview.trigger("unveil");
images = images.not(loaded);
}
$w.on("scroll.unveil resize.unveil lookup.unveil", unveil);
unveil();
return this;
};
})(window.jQuery || window.Zepto);

0 comments on commit 9de72a4

Please sign in to comment.