theonion / comcastifyjs Goto Github PK

Sometimes images just load too damned fast.

Home Page: http://theonion.github.io/comcastifyjs/

License: MIT License

JavaScript 100.00%

comcastifyjs's Introduction

ComcastifyJS

With all this internet going around, sometimes you just want to experience the thrill of a long page load. Give your users the chance to enjoy a little slice of the future by slow loading your website's images with ComcastifyJS!

Lets slow things down!

Include comcastify.js on your page, or use the latest version from our CDN:
```
<script src="http://code.onion.com/comcastify.js"></script>
```
Prepare the images on your page on document ready (so images don't show up before the box):
```
comcastifyjs.letsPrepareTheseImages();
```

Initialize comcastify on window load (so image sizes are properly calculated):

comcastifyjs.fixMyImagesLoadingSoFast({
    boxColor: '#123456',
    loadMaxPercent: 0.75,
    loadSpeed: 100,
    loadIncrement: 5
});

Switch up parameters to change your experience:
- elements : A list of DOM elements to limit comcastification to.
- boxColor : The hex color for the box placed over images.
- loadMaxPercent : The max percentage of image to load. (0 to 1)
- loadSpeed : Time required to load your images to their max in ms.
- loadIncrement : Number of pixels to load each time the loadSpeed timer ticks.
- randLoadIncrement: Set to true to make load increment random, loadIncrement ignored in this case.
- randomPause : Probability of skipping a pass each time the loadSpeed timer ticks. (0 to 1)
- progressiveJPEG Set to true to enable progressive JPEG emulation

See it in action!

See an example on the project's site at: http://theonion.github.io/comcastifyjs/

Or, see it modeled by these koalas!

That's it!

Now grab a coffee and enjoy the load times!

comcastifyjs's People

Contributors

Stargazers

Watchers

comcastifyjs's Issues

Not loading slow enough?

I love this project!!

This is so useful! I still think there are many areas which could be improved. Please consider adding a paid teared system where premium members can decrease speeds EVEN MORE than free users!!!

Does not add jpeg artifacts?

While this is a great tool for any dev wanting to add that extra excitement to a web application, it is disappointing that the tool does not add any jpeg artifacts to the images, for that extra twist when the image finally appears.

I feel that jpeg artifacts go hand-in-hand with slow loading and is a must in any library like this one that wants to stay competitive in the fast-moving world of web application degradation.

NOT SLOW ENOUGH! Plz simulate css as well!

I love this sooo much but not enough! It doesn't looks like 10 years before at all!

inline background versus adding a div

Great stuff, just nit picking on how it could be done without adding additional elements into the DOM.

Hide the targeted img tags and hook up onload callbacks for each of the images, which will be used to grab the height when their finished.

Remove the src and move it onto an inlined styled background. Set the img height to 0 and the margin-bottom to the cached height value from the onload callback. Now begin to emulate the comcast-effect by increasing the height and decreasing the margin-bottom.