flashedge

flashedge supports this item

Supported

16 comments found.

Can this script package be used to preload an entire webpage, and prevent any part of the webpage from being displayed until all of the assets (css files, js files, and image files) have been loaded into the document?

Yes, there is a queue function which does just that. You can preload all supported files and add them to the DOM only after it has been cached. You’ll get examples with the download file showcasing how it’s done.

Additionally there are also callback functions which enable you to create your own behavior or even concatenate preloading phases for your project.

It’s excellent, great sales and good luck to you too, of course.

Thanks for your kind comment. :)

Hi,

I just purchased the circular pack. I want to use the circle/donut chart not as preloader but as a chart. How do i make it just animate and show my desired number? (for example, I want the donut to animate to 76%).

thanks.

to clarify, i want animation to begin at 0

There is a handy render function for that. You’ll find an example in the root named render.html which is not animated out of the box, you’re free to use whatever tweening technique you want.
var r = $('.render').circularPreloader({ // render example, with no preload
            radius:30,
            loadedPadding:5,
            loadedAlpha:0.15,
            progressPadding:4,
            glowSize:2,
            glowEnabled:true,
            percentageEnabled:true
        });

        r.render(86);

Here’s an example using Greensock:

var o = {value:0},    // start value
              val = 75;         // end value

          TweenMax.to(o, 1, {value:val, ease: Cubic.easeinout, overwrite:1, onUpdate:function(){r.render(o.value); }});

Just append this snippet to the render example and you’re set.

Looks slick – good luck with sales :)

Thanks! :)

I want to use this on a site that pulls images from other sites. However, I use:

onerror=”this.style.display=none”

in the image tag, so that if the image has trouble or times out getting pulled, it hides the dead image.

Will your preloader work with this and still hide the errored out image tag? I don’t want my page to continue showing preloaders for all the unpullable images.

I’m very interested in purchasing if it works correctly with the onerror code.

Thanks.

There are onUpdate and onComplete callbacks. Whenever there is an error a strikethrough appears above the preloader.

Anyway your feedback is useful and I’ll consider to include the onError callback in the next update. This way you will be able to include your own function whenever a preload fails.

Added onError callback in the new update. Enjoy! ;)

Hi,

Got this error in the console: Uncaught TypeError: Cannot read property ‘progress’ of null.

It’s about this line of code: if (options.autoDestroy && preload.progress == 1) { options.transitionsEnabled ? setTimeout(destroy, 2000) : destroy(); }

This is my code: $(’.preloader’).circularPreloader({ debugMode: false, queue: [ “assets/images/SSWebAnimatie-1.jpg”, // more images ] });

Can you reproduce this error, or am I doing something wrong?

I suppose it gets stuck when the garbage collection happens. But it’s kind of strange unless your file is corrupted or the url is wrong. You can see a queue example in the download folder which works just fine: http://apps.flashedge.net/circular/queue.html

If you wish I can inspect your work to troubleshoot it.

Thank you, I will have a further look at the example, and compare it with my code to see what’s different. If I don;t succeed I will let you know. Thank your for the quick reply and the awesome code :)

Hi,

I just bought the preloader but maybe it’s not what I was looking for. I tried to install it without success and so I read that it’s a preloader for images but I need of a preloaded for the page. Do you think I can use your instead of this one on my website? www.gianlucacecere.it Thank you for your help

You can preload all file assets of your website, including images, audio, video, js, css and more through a queue and trigger custom functions with the oncomplete callback. You’ll find an example in the root which looks like this: http://apps.flashedge.net/circular/queue.html

So, you might hide the website container and show it once you’ve preloaded the needed files.

I’m trying to preload my entire website: sonofabeast.com, do the images need to be numbered 01.jpg etc? I’m having trouble getting it to work,am I missing external files?

You can name the files as you wish and feed them in the queue. Check out the provided example. Remember that the preloader will load the files even if you’re having them already in your DOM. So you should ideally add them in the DOM after the loading is done.

Hi Author, Almost every other time I load my page, I get several hundred “Uncaught TypeError: e.match is not a function” errors with a ‘NaN’ percentage in my loader. It loads perfectly some times and then the next it freaks out like this. Do you have an idea of why?

Thanks

Nothing to worry about. It’s the progress arc that freaks out whenever there is no value to render and just throws error in the console. I already addressed this issue and will include the fix in the next update so you won’t be bothered in the log.

Am i the only one who tried the demo but it doesn’t work for? The circle next to the title spins pretty weirdly and in the demo part none of the demos work. First 0%, then Nan%, some second later the photo of the girl appears. Tried on Safari and Firefox (newest version, Mac) + on iPhone Safari – the same result on all devices.

It is my intention to isolate the cause of this glitch and I’ll need your help, since I cannot reproduce it myself. Neither can the people I asked to test it.

Does this page render well for you? http://apps.flashedge.net/circular/render.html It should show just a static circle at 86% with no tweening. If this shows up fine then I can exclude snap.svg.

The other library is preload.js which you can test here: http://www.createjs.com/demos/preloadjs/preloadqueue Can you load the whole queue without issues?

Then the last one is Greensock which is used as ticker for animation. I really trust this one, so I can exclude it from the possible causes. Anyway you can browse the demos on http://greensock.com

I really appreciate your help. We should maybe continue this discussion privately as it might take some time to troubleshoot.

Do you use skype? If so, let me know your ID, so we can continue discussing there!

Sure. My contact is: e.manco

Hi, I’m trying to preload part of the content of a website via the “queue” method with the code provided in the sample file.

The problem I get is that the animation disappears after a few moments while the content is still loading.

I can tell when the loading is complete because I’ve set a function “onComplete” that reveals a set of buttons.

Here’s the website if you want to have a look. www.olivierofiori.it/newsmaker/

Thank you!

I see. Try setting transitionEnabled to false and hide the loader in the onComplete event like you’re already doing right now by setting the display to none on the cp-wrapper. Otherwise avoid hiding the wrapper in the onComplete event and keep the transitionEnabled to false.

Using both will overlap two actions resulting in unwanted behavior. The tweening lags slightly behind the real progress value, which will result in premature transitions.

I’m committing also an update that allows no tweening with just a simple render of the actual loading progress. Some people might prefer it.

You can view how it has been used on this site, just for reference: http://loveweek-citv.it/

Thank you! Now it works fine.

I just purchased and went to open the file and noting loaded. Looks like i’m getting a bunch of jQuery undefined errors? Am I missing something? I haven’t changed anything.

You need to run the script on a webserver and keep sure jQuery is available.

whoops.. thanks :0)

I’ve had no luck with other “entire webpage” preloaders responding to the script below. For some reason the files that howlerjs references do not load, while all other filetypes do. Will your queue function solve this issue?

var allSounds = new Howl({ src: [‘audio/my_audio.mp3’],

I have no clue about howler, but I guess you’re not passing the paths but some object that is not recognized.

dones not work for full page

I’m usually very open to my clients when it comes to troubleshoot issues. You just asked for a refund in a couple of hours, which I approved a few minutes ago. Have a nice day, sir.

Hi,

I just bought your amazing circular HTML5 Preloader. I would like to preload the entire webpage, and prevent any part of the webpage from being displayed until all elements have been loaded. I have followed your guide I used “Queue” but I cannot get to work. It sticks to the top of the page.

The test site is: http://www.sandvall.dk/index-test.html

Please advise; ATB Morten

I see that’s just a styling issue. You might put the preload container at the end of the DOM right before the closing body tag. Add some styling to it to overlay your website, using absolute position and centering it.

A common mistake is to keep the image references in the DOM and declare the same paths in the preloader queue. You’re loading the same assets twice this way inside the browser! So, you should remove any reference in the DOM and restore them later in the onComplete event. The same event should be used to do any animation like fading out the preloader and showing the actual content.

If you’re still having issues feel free to contact me privately. :)

What are the greensock plugins included?..By the way, amazing work.

None. It’s loaded through CDN to keep the footprint small.

by
by
by
by
by
by