Jump to content

  • Log in with Facebook Log in with Twitter Log In with Google      Sign In   
  • Create Account

Welcome to BZPower!

Hi there, while we hope you enjoy browsing through the site, there's a lot more you can do if you register. Some perks of joining include:
  • Create your own topics, participate in existing discussions, and vote in polls
  • Show off your creations, stories, art, music, and movies
  • Enter contests to win free LEGO sets and other prizes
  • Participate in raffles to win LEGO prizes
  • Organize with other members to attend or send your MOCs to LEGO fan events all over the world
  • Much, much more!
Enjoy your visit!


Loading images inline, only when the user requests it

Posted by >_< , in Development Mar 24 2013 · 505 views

tech html JavaScript jQuery

Note: this writeup is a general explainer of the this proposed feature's technical side. When the feature itself has completed subjection to some final tests and/or optimizations, and is thus considered fully done, it will be submitted into the Tracker's 'Suggestions'-category, as all user-proposed changes should be.




As many of you know, every image posted on BZPower should be within 500 kilobytes (or, to avoid the ambiguous definition of 'kilo' in this case, kibibytes (KiB) ) in size, in order to be in compliance with the Rules & Guidelines; if it's size exceeds 500 KiB, then it should be linked to instead of embedded.
If my assumptions are right (and please do correct me if I'm wrong here), this is because while the larger image will still be loaded, but only when the user explicitly wants the image to load; that way they get to see the image they wanted to see, but without slowing down the page for everyone that doesn't want to behold the latest size-monstrophic abomination.
There's one problem with this, though: it has to be opened on an external site. Not only do certain imagehosts redirect you to a page that has a bit more content then just the image you requested when you're not very cautious at how your link looks like (and some even redirect you when going to what seems like the actual, absolute path of the image)(*cough* no names *cough*), it also has to be loaded in another tab, which honestly just doesn't really look that good.
But then, luckily, there was an amazing invention / arcane contraption / JavaScript framework called 'jQuery'.
Using the aforementioned magic spell framework, combined with a few lines of CSS to make it actually look like something that most definitely isn't rotten (and possibly zombified) salad (Invasion of the Zombie Salad. Make it happen.), I've devised a neat little script to get around this problem.
Basically, the humongously-large image won't load, because there is no image to load.

For those of you that don't want to read through all this:

Obligatory "TL;DR"-section

It loads an image when you click a button so it doesn't slow down the page, and it's magic.



How it works

A tiny little bit of explanation of how images work in HTML (feel free to skip ahead if you already know this): to load an image, you have to use the <img /> tag, and required are two attributes: the image's source, or 'src', and an alternate description to provide if the image fails to load, or is in the process of loading (or, for versions of Internet Explorer prior to IE9, to display as a tooltip on-hover), also known as the 'alt'-attribute. In the end, you'll find your tag looking like this: <img src="http://example.com/image.png" alt="Look at my shiny image!" />
While the image will render just fine without the 'alt'-attribute (but it is advised against leaving it out in the HTML Specification), without the 'src' there is no image to load, and conform to logic and common sense it will not be loaded.
And that, is exactly what this little piece of code does. The image URL specified to the BBCode parser, and, for the sake of the example, let's just say the BBCode used for this is [eximg], so it'd be specified as [eximg]http://example.com/image.png[/eximg] (or, for that matter, [eximg=]http://example.com/image.png] )will be placed into the 'alt'-attribute of the image, and then the user presses the 'Show'-button, it will be moved into the 'src'-attribute, and an extra class will be added to apply CSS rules appropriate for the newly-loaded image. With the 'src'-attribute defined, there will be an image to load, and only then will the image actually start loading.

Pics or It Didn't Happen

As you wish, oh Great and Mighty Random Person that's Reading This.

At first, we got ourself this nice little spoiler-like thingmajicknessy:

Posted Image

But then, we press the incredibly powerful and ancient artifact known only as....... the Button

Posted Image


Hold on, something's beginning to load here......
Posted Image


Aaaaaaaand there we have our lovely, 2667x2156, 4.12 MB-large Teridax-box art, all loaded when, and only when, the user presses a button.
Isn't that just super sweet laser robot zombie dinosaurs awesome? =)
(Oh, and just for your information: this post uses screenshots of a heavily-cropped version of that picture. This entry really has no more than roughly 200 kB ;) )




OMFG! I can haz? / By George, this is most certainly an interesting creation indeed. Would you kindly mind sharing the source code of this marvellous invention with me and my fellow chaps of exquisite tastes and finely-polished monocles?

In case you want to use this purely to mess around with, then sorry, no. If you wanted to learn more of how to do this, I'd suggest you'd look up some tutorials, or just Google tiny bits of code and piece them together. After all, that's even how the greatest of programmers started ;) (You have 10 minutes to become the next Bill Gates. Clock's ticking, pal.)
But if you actually want to use this in anything of any notable or unnotable interest, feel free to catapult me a PM and explain your request/situation.
Well, this was it for today. Have fun, guys =)
Signed, Zeene, the One and Only Grand Overlord of Absolutely Nothing

  • 0