When there is no Javascript turned on. What other solution?

[CodeGraphics]

I am working on a website. I have an image that I set to display:none in css. I used javascript to display it and slide it in after page has finished loading. It’s working perfectly.

I want to launch the website, but I said let me disable javascript on my browser and see what will happen. I reloaded the web page, and the image didnt show at all. This is normal since it has been set to display:none in css.

Here is my question: What is the solution to this? I want a situation whereby a user will still see the image even when js is disabled in his browser. I dont want the image to slide in at this point, but I want it just to load and show like any other thing on the webpage.

[CodeGraphics]

Ok. But I used this:

and it worked. What do you think?

[CodeGraphics]

>

[CodeGraphics]

[CodeGraphics]

This is what I finally did, and it worked. Does it have any side effect?

>

[CodeGraphics]

Can’t get this to display my codes.

>

[CodeGraphics]

[CrocoDillon]

I think it’s easier with `` and change that to `class=”js”` using JavaScript, like html5boilerplate, using Modernizr or this short snippet:

(function(h){h.className=h.className.replace(/bno-jsb/,’js’)})(document.documentElement)

Then you can use `.js img { display: none; }`

Just a side question, are you using it to delay loading the image or just for some visual effect. I got my doubts delay loading like this works, at least not in MQ (see http://timkadlec.com/2012/04/media-query-asset-downloading-results/ )

[CodeGraphics]

Look at what i did. I used css to hide certain image. Then i used javascript/jquery to show the image after page load. But before the image is shown, js will delay it for 5 seconds, then it will slide in from bottom.

When i disabled js in my browser, the image as expected did not show up at all. But I have used noscript tag to display the image to block.

@CroCodillon, I think noscript option is far simpler in this case. What you think.

[derElch]

what would be with HTML5 / CSS3 options?
give the image a class, let it slide in from an hidden area.

[Paulie_D]

Position it absolutely off the screen and animate it in with Keyframes.

It won’t wait for a page load though.

[CrocoDillon]

> What you think.

I like to keep CSS external :)

[CodeGraphics]

Ok. But in this case, it’s just one line of inline css.

[theacefes]

It may be just one line but if you let bad habits creep in once, twice, then the next thing you know you have a web project littered with inline styles because you couldn’t bother to externalize the different aspects of your site properly.

[CrocoDillon]

What he said, plus it’s easier to organize your CSS if it’s actually in one place instead of having styles all over the place which makes it harder to maintain and more error prone. By the way internal styles are not the same as inline (as in style attribute) styles, but that’s a sidenote :)

[Author]

Posts