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

On Tue, Apr 16, 2013 at 1:22 AM, Jake Archibald <jakearchibald@google.com>wrote:

> 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).
>

Oh, I thought people were already working around it as you suggest.
Although now that I think about it, I've definitely seen waterfalls on
WebPageTest where that's not true. Yes, we should solve this =/


>
>> 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?
>

As Boris says, no =/


>
> 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>
>
>

While this works in many cases, I don't consider it a complete solution,
since script execution still blocks on stylesheet downloads. I might not
want to block on that download for primary/above-the-fold images.