search

hongaar / unveil2

:mount_fuji: A very lightweight jQuery plugin to lazy load images
http://nabble.github.io/unveil2
38 stars 11 forks source link

src images download on page load #11

Closed BeatLaG closed 8 years ago

BeatLaG commented 8 years ago

Hi,

first of all, thanks for continuing/forking and improving this great plugin!

I have done a quick approach in a website I´m working on and I have realized that images are downloading once the document is loaded, then, as you scroll the page, the images are downloading on demand, but they are twice loaded. First time when the page load (all images with lazy class are downloaded) and again when you scroll ('on demand').

An approach without need to add script tags would be great, but I´m not sure if this is correctly controlled or if I´m missing something.

In my implementation I´m using the same image path within the src attribute and within data.

Hope you can send some light on this! Thanks! :+1:

hongaar commented 8 years ago

Which browser are you using while you encounter this bug? It sounds like a known problem with Safari (see #7). This bug basically renders unveil2.js useless because images are all retrieved on page load.

What do you mean with not needing script tags?

Regarding the image path, it's possible to just omit the data-src attribute if the src attribute contains the same image.

BeatLaG commented 8 years ago

Hi Joram,

I´m using Chrome and checked this in Safari & Firefox (Mac) as well and the issue is present in all browsers. On page load, all the assets are requested and downloaded. This is a basic markup used in my project:

<img class="img-responsive lazy" src="images/team/angela-rossi.png" alt="Angela Rossi">

They are correctly 'lazied' but as I say, they are all downloaded now minds if they are within the visible viewport or not.

Thanks!

hongaar commented 8 years ago

This should be the correct markup, but the key is to call the unveil() function as quickly as possible, so the library can cancel the loading of the images. Ideally just put the script tags just above the closing </body> tag, and immediately after invoke the library, like this:

<body>
  <img class="img-responsive lazy" src="images/team/angela-rossi.png" alt="Angela Rossi">
  <!-- ... -->
  <script src="//code.jquery.com/jquery-2.2.1.min.js"></script>
  <script src="jquery.unveil2.min.js"></script>
  <script>
    $('img.lazy').unveil();
  </script>
</body>

Did this work for you?

BeatLaG commented 8 years ago

I have tried in many ways and the results are the same. The only detail here that I have not tested is to upgrade my jquery library. I´ll check this out.

Thanks!

hongaar commented 8 years ago

Some questions to help me debug:

  1. In your example, do you see any cancelled requests in the devtools like this? image
  2. Does this occur for you on the examples page? http://nabble.github.io/unveil2/docs/examples/simple.html
BeatLaG commented 8 years ago

Yes, some canceled resources appear related to lazy assets. I´m attaching my results when the page loads, at this point, only one image is in viewport and fetched by the plugin, and as you can see, all the resources have been loaded.

unveil2

The same cancelled assets appear on the examples page as well.

I hope it will help you out!

hongaar commented 8 years ago

Actually, as far as I can see, the lazy images are cancelled on page load, and will be lazily loaded when images appear in the viewport. This looks like expected behaviour to me.

BeatLaG commented 8 years ago

Well, but as you can see there are many other .lazy instances that are not cancelled. And this cancel behavior looks pretty random, sometimes they appear cancelled and other times some other different instances are cancelled... pretty weird.

I have tested this in local and online and the behaviors are the same in both cases.

hongaar commented 8 years ago

Hmm, that's strange indeed. Some randomness can be expected because the client could load the image (from cache) before unveil clears the src attribute.

Could you recreate your case on jsfiddle/codepen or can you give me the link to your online case?

hongaar commented 8 years ago

Closing this for now, but please do feel free to comment and I will reopen the issue.