Skip to content
Browse files

Lazy load people photographs, add like buttons

  • Loading branch information...
1 parent e04a675 commit bc38835d82d636e4ae17d33fdbab30173b59ea20 @alagu alagu committed
View
BIN app/assets/images/default-user.gif
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
133 app/assets/javascripts/jquery.lazyload.js
@@ -0,0 +1,133 @@
+/*
+ * Lazy Load - jQuery plugin for lazy loading images
+ *
+ * Copyright (c) 2011 Jerry Luk
+ *
+ * Licensed under the MIT license:
+ * http://www.opensource.org/licenses/mit-license.php
+ *
+ * Modified after Mika Tuupola's lazyload:
+ * http://www.appelsiini.net/projects/lazyload
+ *
+ * Version: 1.0.2
+ *
+ */
+ (function($) {
+
+ $.fn.lazyload = function(options) {
+ var settings = {
+ threshold: 0,
+ failurelimit: 0,
+ delay: 100,
+ container: window
+ },
+ elements = this,
+ timeout = null,
+ $lastElement;
+
+ if (options) {
+ $.extend(settings, options);
+ }
+
+ function checkElements(event) {
+ var counter = 0;
+ var containerOffsets = getOffsets(settings.container);
+ elements.each(function() {
+ if ($(this).data("src") && $(this).is(":visible")) {
+ var elementOffsets = getOffsets($(this));
+ if (aboveTheTop(containerOffsets, elementOffsets, settings) ||
+ leftOfBegin(containerOffsets, elementOffsets, settings)) {
+ /* Nothing. */
+ } else if (!belowTheFold(containerOffsets, elementOffsets, settings) &&
+ !rightOfFold(containerOffsets, elementOffsets, settings)) {
+ $(this).trigger("appear");
+ } else {
+ if (counter++>settings.failurelimit) {
+ return false;
+ }
+ }
+ }
+ });
+ }
+
+ function getOffsets(element) {
+ var elementTop,
+ elementLeft,
+ elementWidth,
+ elementHeight;
+ if (element == undefined || element == window) {
+ elementTop = $(window).scrollTop();
+ elementHeight = $(window).height();
+ elementLeft = $(window).scrollLeft();
+ elementWidth = $(window).width();
+ } else {
+ elementTop = $(element).offset().top;
+ elementHeight = $(element).height();
+ elementLeft = $(element).offset().left;
+ elementWidth = $(element).width();
+ }
+ return {
+ top: elementTop,
+ height: elementHeight,
+ left: elementLeft,
+ width: elementWidth
+ };
+ }
+
+ function belowTheFold(containerOffsets, elementOffsets, settings) {
+ var fold = containerOffsets.top + containerOffsets.height;
+ return fold <= elementOffsets.top - settings.threshold;
+ }
+
+ function rightOfFold(containerOffsets, elementOffsets, settings) {
+ var fold = containerOffsets.left + containerOffsets.width;
+ return fold <= elementOffsets.left - settings.threshold;
+ }
+
+ function aboveTheTop(containerOffsets, elementOffsets, settings) {
+ var fold = containerOffsets.top;
+ return fold >= elementOffsets.top + settings.threshold + elementOffsets.height;
+ }
+
+ function leftOfBegin(containerOffsets, elementOffsets, settings) {
+ var fold = containerOffsets.left;
+ return fold >= elementOffsets.left + settings.threshold + elementOffsets.width;
+ }
+
+ this.each(function() {
+ var $this = $(this);
+ $lastElement = $this;
+ if (settings.placeholder) {
+ $this.attr("src", settings.placeholder);
+ }
+ $this.one("appear",
+ function(e) {
+ $this.attr("src", $this.data("src"));
+ $(this).data("src", null);
+ });
+ });
+
+ /* Put a load handler on the last element because when the load event is fired, the image is rendered in
+ the DOM. Without it, it will cause the browser to run really slow for computing the offset */
+ $lastElement.one("load",
+ function() {
+ /* Fire one scroll event per scroll. Not one scroll event per image. */
+ $(settings.container).bind("scroll lazyload",
+ function(e) {
+ if (timeout) {
+ clearTimeout(timeout);
+ }
+ timeout = setTimeout(function() {
+ checkElements();
+ },
+ settings.delay);
+ }
+ );
+ /* Force initial check if images should appear. */
+ checkElements();
+ });
+
+ return this;
+ };
+
+})(jQuery);
View
11 app/assets/javascripts/radio.js.coffee
@@ -0,0 +1,11 @@
+$(document).ready ->
+ $('.participant').tooltip();
+ $('img').lazyload();
+ $('.like-button').click ->
+ $.ajax this.href,
+ type: 'GET'
+ dataType: 'json'
+ error: (jqXHR, textStatus, errorThrown) ->
+ $('body').append "AJAX Error: #{textStatus}"
+ success: (data, textStatus, jqXHR) ->
+ $('body').append "Successful AJAX call: #{data}"
View
12 app/views/radios/_submission_block.html.erb
@@ -2,7 +2,7 @@
<div class="post-main row">
<div class="span1">
<a href="http://www.facebook.com/<%= submission.user[:fbid] %>">
- <img class="thumb" src="http://graph.facebook.com/<%= submission.user[:fbid] %>/picture" width=75 height=75>
+ <img class="thumb" src="/assets/default-user.gif" data-src="http://graph.facebook.com/<%= submission.user[:fbid] %>/picture" width=75 height=75>
</a>
</div>
<div class="span-10">
@@ -22,21 +22,23 @@
<% if submission.participants.count > 0 %>
<div>
<a href="https://www.facebook.com/<%= submission[:post_id] %>" style="float: right; padding-bottom: 10px;">
- <%= submission.participants.count %> liked this song!
+ <span id="<%= submission[:post_id] %>-like-count"><%= submission.participants.count %></span> liked this song!
</a>
</div>
<div class="clearfix"> </div>
<% end %>
- <ul class="participants">
+ <ul class="participants" id="<%= submission[:post_id] %>-like-people">
<% submission.participants.each do |participant| %>
<li>
- <a href="http://www.facebook.com/<%= participant[:fbid] %>">
- <img src="http://graph.facebook.com/<%= participant[:fbid] %>/picture?type=square" alt="<%= participant[:name] %>" height=40 width=40>
+ <a href="http://www.facebook.com/<%= participant[:fbid] %>" class="participant" rel="tooltip" title="<%= participant[:name] %>">
+ <img src="/assets/default-user.gif" data-src="http://graph.facebook.com/<%= participant[:fbid] %>/picture?type=square" alt="<%= participant[:name] %>">
</a>
</li>
<% end %>
</ul>
+
+ <a class="like-button" id="<%= submission[:post_id] %>-like-action" href="/like?id=<%= submission[:post_id] %>">Like</a>
</div>
<div class="video">

0 comments on commit bc38835

Please sign in to comment.
Something went wrong with that request. Please try again.