Re: <img src="..." defer>

On Mon, Apr 15, 2013 at 6:10 PM, William Chan (陈智昌)
<willchan@chromium.org>wrote:

> The wins are:
>
>> * Avoid unnecessary image downloads (hidden images)
>>
>
> Just to be clear, this isn't a problem today, because people use JS based
> solutions to avoid this, right? IIUC, you're saying we should enable a
> markup based solution (and I'd support that), right? Or is it actually
> common that there are display:none images in practice (that would thus be
> getting downloaded in today's world)?
>

I think it is common today. Eg, a carousel of images the user clicks
through, they may only see the first page but the images are loading in all
of them. I've worked around this in the past by using divs & CSS
backgrounds which don't load if a parent is display:none (although there's
inconsistency across browsers here).


> I don't see an issue with "Begin preloading resources if the network is
>> idle." in terms of blocking scripts. If CSS has downloaded we can still
>> parse ahead and calculate layout to determine if an image should download.
>>
>
> We can *speculatively* do so. But blocking script can obviously always
> change the images' styles.
>

Hmm. I see your point here. Is there any prescient for reading ahead during
a blocking script & calculating styles?

I know Firefox will start downloading blah.png…

<script src="whatever.js"></script><img src="blah.png"><!---->

…even if whatever.js contains…

document.write('<!'+'--');


> I'm open to it being two separate things. Having one attribute makes it
>> simple, whereas a separate prioritisation attribute could be used across
>> script, css, audio, video, imagery etc etc.
>>
>
> I appreciate the desire for simplicity. I am concerned there are too many
> use cases here though to adequately solve with a single mechanism. I still
> haven't thought it through completely, but my gut instinct is to split it
> out into:
> * "defer" as a mechanism to indicate lower priority for better browser
> resource prioritization.
> * i suck at naming, but "waitforstylebeforedownloading" for fuller
> control. This makes it clear it's thwarting preloading and has a stronger
> semantic declaration of desire for lazy loading. This would work as you
> currently propose.
>

Defer & lazy? I dunno, I still feel we can do this as one, but yeah, we
need something for prioritisation that extends beyond img, perhaps into CSS
too.


> And I don't believe there's a complete solution for the primary image with
> new image format (with limited support) except content negotiation, which I
> understand is still very controversial.
>

How about:

<img src="whatever.png" lazy style="display:none" class="replace">
<script>
var img = document.querySelector('.replace');
if (webpSupport) img.src = "whatever.webp";
img.lazy = false;
img.style.display = '';
</script>