diff --git a/README.md b/README.md index 76807b9..9c20f92 100644 --- a/README.md +++ b/README.md @@ -6,17 +6,23 @@ With all this internet going around, sometimes you just want to experience the t `````` -2. Initialize comcastify on window load, something like this (so image sizes are properly calculated): +2. Prepare the images on your page on document ready (so images don't show up before the box): ``` - window.onload = comcastifyjs.fixMyImagesLoadingSoFast({ + comcastifyjs.letsPrepareTheseImages(); + ``` + +3. Initialize comcastify on window load (so image sizes are properly calculated): + + ``` + comcastifyjs.fixMyImagesLoadingSoFast({ boxColor: '#123456', loadMaxPercent: 0.75, loadSpeed: 100, loadIncrement: 5 }); ``` -3. Switch up parameters to change your experience: +4. Switch up parameters to change your experience: * **boxColor** Hex color for the box placed over images. * **loadMaxPercent** Max percentage of image to load. * **loadSpeed** Speed to load your images to their max in ms. diff --git a/comcastify.js b/comcastify.js index 43711c3..e3610fe 100644 --- a/comcastify.js +++ b/comcastify.js @@ -20,6 +20,15 @@ var comcastifyjs = (function () { }; }; + var prepare = function () { + // hide images so image doesn't show up before box + var imgs = document.getElementsByTagName('img'); + for(var i = 0; i < imgs.length; i++) { + var img = imgs[i]; + img.style.visibility = 'hidden'; + } + }; + var slowImages = function (args) { return function () { var params = { @@ -58,6 +67,9 @@ var comcastifyjs = (function () { // put box over image parent.appendChild(slowload); + // show image again + img.style.visibility = 'visible'; + if (params.loadMaxPercent > 0.0) { // slowload using timeout since this is nicer to the browser :) setTimeout(slowloadModiferCallback(slowload, params), params.loadSpeed); @@ -67,6 +79,7 @@ var comcastifyjs = (function () { }; return { + letsPrepareTheseImages: prepare, fixMyImagesLoadingSoFast: slowImages };