Streaming live at 10am (PST)

Best way to describe this for wishlist?


#1

Hi, what is the best way to describe this and category? https://wishlist.webflow.com/ideas/WEBFLOW-I-1539
Thoughts?

Best,

Nathan


#2

that’s not how media queries for responsive images work… that means to do this Webflow will need to implement custom code.


#3

@samliew I understand that is not how media queries perspective…I still did not get the answer I was looking for is specific wording on how to best state what I am specifically I’m trying to say such that Webflow understands what I am trying to say and others on the forum see the value.

I’m not sure what your’re point is about “webflow will need to implement customer code”…so what?..they’ve got custom code all over the place. I’m not sure media queries have to do with anything…if it’s doable, then it’s doable.

How do I state it in such a way Webflow sees the value in the custom code and has enough go with which understand it is I am saying? Like many people on here I understand some basic concepts and have learned a lot using Webflow, but I am not a developer

If they were to implement such a feature, it would benefit the website owner (SEO) and the end user (UZ) due to a decrease page load time…the juice is definitely worth the squeeze on this feature.


#4

I think it should be as simple as this:

<script>
$('img:hidden').attr('src', '');
</script>

This will unset the source attribute if the image is hidden.


#5

Pardon my ignorance @samliew …what does the code exactly do?

Best,

Nathan


#6

This will make an actual image to not be loaded if it is hidden, saving traffic. At least that’s what I think it does.


#7

@dram And this would do it to all images no extra code?

Best,

Nathan


#8

to all images that are hidden. If you hide the div, for example, that contains the image, it won’t work I guess.

edit: basically what this code does is injecting empty space where image source is, effectively making it not point anywhere, hence nothing is loaded.


#9

No, it does work.

See https://api.jquery.com/hidden-selector/

An element is assumed to be hidden if it or any of its parents consumes no space in the document.


#10

That’s awesome then!

edit: one caveat is that if the hidden object is hidden dynamically (with interaction for example), it will stay hidden even if you ‘unhide’ it :frowning:


#11

Hmm…I think we’re on the right path @samilem and @dram with a few things to think about. On the iPad, normal website width is used and on the portrait, the iPad view is used…I’ve tested it first hand. So what that means is that if one opens the website in portrait view and then turns it, then one wouldn’t see the image.

Also, I do have some interactions that on display none initially before loading based on certain actions. I suppose I could re-engineer/rework those, but I’d rather not if it can be helped.

Ideally, it would be awesome to not have the images be requested on the mobile portrait and landscape views while also allowing it to be pulled the images from the iPad view even though they aren’t being shown, and allow for display non-interactions. The display non-interactions can be worked around I guess. Anyway it would be cool if I could find a way to have my cake and eat it too :slight_smile:

I really appreciate the help @samliew

Best,

Nathan


#12

I implemented it, but I I don’t think it’s working. When I load the page on a very collapsed browser view like that of a mobile phone and then expand the browser, I am still able to to see the images that were hidden at mobile. If it was truly working, would I not be able to see the images when I expand the window since the images should have never been called during that more condensed view? @samliew @dram

Best,

Nathan


#13

It works for me though. You need to put the script into the “Before </body> tag” section of the custom code.


#14

Yeah custom code always goes at the bottom.