63621

Progress bar in jQuery when loading background-image from script

Question:

I have a script that loads big images into the body in this fashion :

$('body').css("background-image", "url(pics/jpg/folio/" + TtempID + ".jpg)");

I'm looking for a progress bar script that would run everytime the background image is changed, without a single page reload.

I'm currenty using Twitter BootStrap in conjonction with jQuery.

Thanks in advance for any valuable piece of information.

Cheers :)

Answer1:

Something like this ?

<strong>jQuery</strong>

function loadBackground(image) { $('body').addClass('loading'); var img = new Image(); img.onload = function() { $('body').css({ 'background-image': 'url(pics/jpg/folio/" + image + ".jpg)' }).removeClass('loading'); }; img.src = url; }

<strong>CSS</strong>

.loading:after{ content:' '; position:absolute; top:0; left:0; right:0; bottom:0; background:url('PATH-TO-LOADING-IMAGE') 50% 50% no-repeat; z-index:1000; background-color:rgba(0,0,0,0.3); }

Use it like

loadBackground( TtempID );

Demo at <a href="http://jsfiddle.net/gaby/CYFNc/2/" rel="nofollow">http://jsfiddle.net/gaby/CYFNc/2/</a>

Recommend

  • Sub entity doesn't update when assign null value to its reference
  • Is it possible to create a console window (as created by AllocConsole) as a GUI child window? If so,
  • last-of-type doesn't work with custom elements in IE11 and Edge
  • pushViewController Extremely slow
  • Documenting Macro Functions in C++ with Doxygen
  • compile error in recursively go down folder structure and to delete specific files
  • OCaml-Wodi Part 2: Compiling using what was installed
  • Not able to start Service using Broadcast Receivers
  • android - how to use/set up nested spinners?
  • Can't resize canvas/scale using Fabric.js
  • Query URL for Log In Status, javascript
  • How can converting a pointer to `void*` twice be invalid?
  • how to change button text after succes in ajax
  • Is there a way to remove a script from a doc (using the new doc embedded script)
  • JSF validateLength question
  • Laravel Query Builder Update with Increment
  • Multithread python requests [duplicate]
  • Homomorphic filtering in OpenCV
  • How do I set the logging properties in a spring java configuration?
  • How to get “crispEdges” for SVG text?
  • JQuery Mobile Ajax Navigation in Single-Page Template
  • How to control xtics in gnuplot
  • How to select multiple items from a List view - JavaFX 8
  • python selenium scraping tbody
  • Magento-Change Attribute of All Products
  • How to redirect into different page by user type in php and mysql
  • Find angle of point on circle
  • How do I use libcurl to printf a remote FTP directory listing?
  • getting the class name of an HTML tag using XPATH
  • Add font awesome icon to custom add to cart button in Woocommerce 3
  • how to read to huge file into buffer
  • JQuery: Infinite input select
  • Python 3x- Compression Makes File Bigger :(
  • How to handle div that is created dynamically in a table
  • Google App Engine backend servlet not responding