search

thinker3197 / progressively

A JavaScript library to load images progressively 🌇
https://thinker3197.github.io/progressively
MIT License
698 stars 68 forks source link

Usage as bg-image #24

Closed Tamxaun closed 7 years ago

Tamxaun commented 7 years ago

hi,

I had tried to using progressively.js, and it works if used as img tag, but after I had tried using the image as background images, in this case, it didn't work, no any errors. I was using the demo site and had changed class to "progressive__bg".

thinker3197 commented 7 years ago

@Tamxaun, you need to do two things in order to load images as background urls. Firstly, add the classes progressive__bg && progressive--not-loaded. Second, you need to add the progressive image url (higher quality image) to the data-progressive attribute and the low quality image url as the background image of the element. If you're doing this, there shouldn't be an issue. In the latest release, a few fixes has been made. Please update progressively to use the most stable version. Ps, if the issue still persists feel free to re-comment on this thread.

Tamxaun commented 7 years ago

seems to me, the script hook up only to img tag not to div. For testing, I used demo site on doc folder and this current example to display an image:

<div class="progressive__bg progressive--not-loaded" data-progressive="https://cdn-images-1.medium.com/max/800/1*gYbNz3-YopUgUwrR0mFJDg.jpeg" style="background-image: url('https://cdn-images-1.medium.com/freeze/max/30/1*gYbNz3-YopUgUwrR0mFJDg.jpeg?q=20');"></div>

thinker3197 commented 7 years ago

No, that isn't the case. progressively works perfectly with any element given that the element has progressive__bg & progressive--not-loaded classes. Here is a working fiddle of your example - https://jsfiddle.net/13caj1zn/1/

Tamxaun commented 7 years ago

I see. Thanks for the example, the problem may be in the position of the div. In my case, the div does have fixed position, though absolute position seemed works fine.

Here is an example of my case: https://jsfiddle.net/Tamxaun/3t6wkm3p/

the94air commented 7 years ago

I notice progressively doesn't work if parent height is 100%; It just stop working. I think it has something to do with the scrolling event. I had the same problem

<main>
...
<div>
<figure class="progressive">
    <img class="progressive__img progressive--not-loaded" data-progressive="img.jpeg" src="img-sm.jpeg">
</figure>
</div>
...
</main>

It doesn't work unless I removed this

main { height: 100%; }
thinker3197 commented 7 years ago

Can you provide a fiddle, recreating your issue? This shouldn't happen, unless you don't provide some definitive height to the absolute parent. For ex - In index.html

<body>
    <main>
        <div class="progressive__bg progressive--not-loaded" data-progressive="foo.jpeg" style="background-image: url('bar.jpeg');"></div>
    </main>
</body>

In main.css

// no height or width to body
body {

}

main {
    height: 100%;  // specifying height/width in percentage means x% height/width of parent, however there isn't any height/width assigned to parent in this case
    width: 100%;
}

In such case, parent's height would equate to nothing (or 0px). If that isn't your case, please let us know.

thinker3197 commented 7 years ago

Also @Tamxaun, I can confirm the issue and I know what's going on there. progressively checks if an element is hidden by finding the offset from it's parent. However with fixed elements the offsetParent is null, obviously. It was an unnecessary check and will be removed in the next version. Thanks for bringing up this issue!

the94air commented 7 years ago

It has been several days and I couldn't recreate the issue ( :man_facepalming: I don't remember). But yea as you said this is properly the issue. Jsfiddle http://💪💯☁👍👉🌈.🍕💩.ws

thinker3197 commented 7 years ago

Yeah, as I said you need to have some definite height/width on the absolute parent if you're using percentage values. It's a common css rule we often miss. Working fiddle (after specifying proper height): http://jsfiddle.net/2ag2220p/18/

the94air commented 7 years ago

Nice :+1: