For some reason images are getting duplicated

[marcelino056]

We are getting and error after implement lazy load for images on our website, is getting the image from the source and putting it as background on style attribute, but is also displaying both images. one under the other.

[keithbooher]

Im having the same issue. A quick work around for me was to target my img elements and apply "background-size: 100%;"

[railsdevsiargao]

I too am getting this problem. Is there anyway we can add something to config to stop this happening?

[omagid-crp]

This is happening for us too. It's only clear something is up when the background-image is not the same size. I'll apply the "background-size: 100%" to handle those (thanks @keithbooher ), but it'd be great if we could prevent duplication in the first place.

[jassa]

That sounds pretty odd. @omagid-crp / others who still care –

• which lazyload JavaScript library are you using?
• could you share a brief snippet of code that reproduces the problem?

[omagid-crp]

@jassa Sure!

In the view:

<%= link_to '[link_to_relevant_website]', target: '_blank' do %>
     <%= image_tag asset_path('donate/daf-direct.png') %>
<% end %>

lazyload.js:

$('img').lazyload({ threshold: 500, effect: 'fadeIn' })

Generated HTML:

Size Discrepancy (only an issue on certain screen sizes):

Here's the version information:

/*!
 * Lazy Load - jQuery plugin for lazy loading images
 *
 * Copyright (c) 2007-2015 Mika Tuupola
 *
 * Licensed under the MIT license:
 *   http://www.opensource.org/licenses/mit-license.php
 *
 * Project home:
 *   http://www.appelsiini.net/projects/lazyload
 *
 * Version:  1.9.7
 *
 */

And in our Gemfile.lock, here's the version referenced:

lazyload-rails (0.5.0)

Let me know if there's anything important I've left out.

[jassa]

@omagid-crp You may need to set the width & height in your image_tag (or via CSS)

If that doesn't do the trick, I'd suggest reading more at https://github.com/tuupola/lazyload/blob/d3ad81c12332a0f950c6c703ff975b60350405a4/README.md#blur-up-images

Link to 1.9.7 lib docs ^

This gem helps integrate lazyload.js with Rails image_tag helpers, but the background-image property you're seeing added is coming from the JavaScript lib itself.

Good luck!

[omagid-crp]

Thanks a lot! I appreciate it!