Openlibrary: Lazy loaded images shouldnt ever display as broken thumbs

[jdlrobson]

Images in the carousel lazy load.

The slick library should have an option to set a placeholder.
Alternatively we should style img tag without a src attribute as plain background. Currently the loading of images appears a little broken.

[LeadSongDog]

@jdlrobson Could you please clarify "broken thumb"? Do you mean as per the Darnden example above? That isn't exactly broken: it is the alt-text shown when no image is available. This is a normal situation if there is no access to the covers held at archive.org from the user's machine. I routinely see that from my work machine.

[jdlrobson]

Sure. Maybe "broken thumb" was the wrong word to use here.
Essentially the problem as I see it, is it's very clear that these images are being loaded via JavaScript and the image should be loading progressively

Compare that to this:
https://jsfiddle.net/solodev/sobtocgc/

which also uses slick and is much smoother.

[LeadSongDog]

So "broken" refers to the simultaneous loading? The fix would implement sequential loading?

[SIGSTACKFAULT]

the img tags should come preloaded with something like src="book_cover_placeholder.png", until they're actually loaded.

[bamoha]

One solution to this is to probably have a dummy image show until a real image comes up.. Using something like

let image = image ? data.img : img.png;

[jdlrobson]

A slick-loading class is present on img tags before they are loaded so this is what I propose:

.slick-loading {
    opacity: 0;
    background: white;
}

If we add a CSS animation for the opacity, this will be much better than the status quo!
Anyone want to work on this task?

[pizzarob]

Hi there. I can work on this.

[pizzarob]

I've got a branch for this fix 😀Can I be added as a contributor so I can submit a PR?

Edit: I was thinking I would push the fix branch to the open library remote, but I can fork and submit a PR from my fork. Will do this tonight.