Question: avoid unnecessarily retrieving "default" thumbnail

[fxkr]

Motivation

A set of "default" (ie, whatever I put in the tag) thumbnails is loaded before justifiedgallery can calculate the right sizes and request these thumbnails:

With proposed workaround (see below), I can eliminate that extra set of roundtrips and make the page render faster:

(Of course both screenshots are taken with cold browser cache.)

My approach

• Merge https://github.com/miromannino/Justified-Gallery/pull/247
• Set waitThumbnailsLoad = false
• Specifying the height/width in the tag
• Set src to a placeholder image (e.g. a 1x1 data-uri gif)
• Use custom thumbnailPath function that uses a data attribute on the img (4th param) instead of the path parameter (1st param)

Question

Is there a more straightforward approach?

[miromannino]

Have you tried to specify the src using the attribute data-safe-src instead of the common src?

[fxkr]

That results in the original sized images being loaded, which is even worse.

edit: I should add that even with data-safe-src, src should not be left empty, because empty img src's actually do cause requests. That's what the data-uri was there for. But that has nothing to do with JustifiedGallery, it happens before JustifiedGallery is ever called.

[miromannino]

This bug is crazy! I didn't know that!

Anyway is still a thing? It seems that was a problem in 2010, not now.

Did you solved it somehow? In theory putting the same stupid image to all should solve the problem. Did you find other solutions we could suggest in the documentation?

edit: in another webpage I found that only old web browsers have this problem: https://gtmetrix.com/avoid-empty-src-or-href.html

[biziclop]

Someone suggested using <noscript>:
https://stackoverflow.com/questions/12158540/does-displaynone-prevent-an-image-from-loading/35944285#35944285

[fxkr]

But the <noscript> approach doesn't really make anything easier than the data uri solution already is, does it? You would still need the custom thumbnailPath function, which is the real issue here, not what browsers do with empty src tags.

My proposal would be: Add support for a new data attribute (let's call it data-src) to Justified-Gallery that, if present, would be be read by JG instead of src. JG would never look at the value of the real src attribute if data-src is present. Then src could contain the 1x1 pixel data uri image[1]. This would be documented. There would be no need for a custom thumbnailPath function (or workaround code in an existing custom thumbnailPath function) anymore.

[1] Or be empty if you don't care about what old browsers do. Though even if modern browsers support empty src tags it strikes me as unwise to use them, since if an old browser comes along, it's the site operator that mostly suffers from the extra requests, not the user who refuses to upgrade. And considering how quickly e.g. many Android vendors completely drop support for their phones there's bound to be a few of them...

[biziclop]

Using noscript would help people with JavaScript turned off for whatever reason seeing something meaningful instead of f*cking nothing. Maybe JG could have some option like preprocessItem() or something.

[fxkr]

biziclop, that has nothing to do with this bug. Also, it's unnecessary. Nothing prevents you from using <noscript>, and when JS is on you can just use document.onload to do whatever you want with any noscript-wrapped DOM elements before you call Justified-Gallery.

[biziclop]

Yes, you are right, it's just kind of shitty that one can't have a non-insane way of preventing unnecessary images to load.

[ericnewton76]

Seems like a logical thing for most optimal use of bandwidth:

• 1x1 image to prevent empty src loads
• data-src for url to full size image
• height/width of images specified on the div for sizing/spacing calculations
• thumbnail via suffixes or func to deliver load res versions to display in the tiles.

Has this gone anywhere?

[miromannino]

@ericnewton76 I agree with you, that's the best way I also came up to. I don't understand your third point. Btw all above that should be clear that I don't really consider