public-mirrors/NewsBlur
1
0
Fork 0
mirror of https://github.com/samuelclay/NewsBlur.git synced 2025-09-18 21:50:56 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fixing image loading on grid. Only loads images > 100 px wide.

Browse source
This commit is contained in:
Samuel Clay 2015-02-10 15:12:47 -08:00
parent 645018c1f1
commit 5352b11588
2 changed files with 19 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
media/css/reader.css
View file

@ -2147,6 +2147,7 @@ a img {
margin-left: 8px;
}
#story_titles .NB-story-grid .NB-storytitles-story-image {
display: none;
width: 100%;
height: 186px;
background-size: cover;

19
media/js/newsblur/views/story_title_view.js
View file

@ -36,6 +36,7 @@ NEWSBLUR.Views.StoryTitleView = Backbone.View.extend({
this.toggle_classes();
this.toggle_read_status();
this.color_feedbar();
if (this.options.is_grid) this.watch_grid_image();
return this;
},
@ -79,7 +80,7 @@ NEWSBLUR.Views.StoryTitleView = Backbone.View.extend({
<div class="NB-storytitles-feed-border-outer"></div>\
<% if (story.image_url()) { %>\
<div class="NB-storytitles-story-image-container">\
<div class="NB-storytitles-story-image" style="background-image: url(<%= story.image_url() %>);"></div>\
<div class="NB-storytitles-story-image"></div>\
</div>\
<% } %>\
<div class="NB-storytitles-content">\
@ -208,6 +209,22 @@ NEWSBLUR.Views.StoryTitleView = Backbone.View.extend({
$inner.css('background-color', '#' + feed.get('favicon_fade'));
$outer.css('background-color', '#' + feed.get('favicon_color'));
},
watch_grid_image: function() {
var self = this;
$('<img>').load(function() {
// console.log(['Loaded', this, this.width, self.model.image_url(), self.$(".NB-storytitles-story-image")]);
if (this.width > 100) {
self.$(".NB-storytitles-story-image").css({
'display': 'block',
'background-image': "url(" + self.model.image_url() + ")"
});
}
}).attr('src', this.model.image_url()).each(function() {
// fail-safe for cached images which sometimes don't trigger "load" events
if (this.complete) $(this).load();
});
},
toggle_classes: function() {
var changes = this.model.changedAttributes();