• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Tim Cooke
  • Campbell Ritchie
  • Ron McLeod
  • Liutauras Vilda
  • Jeanne Boyarsky
Sheriffs:
  • Junilu Lacar
  • Rob Spoor
  • Paul Clapham
Saloon Keepers:
  • Tim Holloway
  • Tim Moores
  • Jesse Silverman
  • Stephan van Hulst
  • Carey Brown
Bartenders:
  • Al Hobbs
  • Piet Souris
  • Frits Walraven

Reload multiple images using jQuery? How to optimize?

 
Ranch Hand
Posts: 119
2
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
I have an update of multiple images using jQuery:





I'm trying to improve it:



I wanted to reduce the time from 10 to 3 seconds, but when I reduce this time, do not update all the images, my algorithm and the rest is not updated.
.

Is there any way to optimize it to run within 3 seconds ?
 
Sheriff
Posts: 67620
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Likes 1
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
What is the point of having both a ready and a load handler? Also why all the machinations with checking the state of the image? What prompted you to try and do more than just set the src property?

If the problem is that it's taking too long for the images to load in order to show them in the succession that you want, you may need to resort to preloading them.
 
Edson Cezar
Ranch Hand
Posts: 119
2
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
How to you think about the best way to preloading them ?
 
Bear Bibeault
Sheriff
Posts: 67620
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Likes 1
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Take your pick: JavaScript preload images. I've used variations of many of the techniques listed.

You might also want to investigate why your server is so slow. Are the images enormously huge?
 
Edson Cezar
Ranch Hand
Posts: 119
2
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Thanks Bear Bibeault, I will investigate it better !
 
Edson Cezar
Ranch Hand
Posts: 119
2
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Is there a way to verify if the reload of an image is complete ?

I´m trying in this way:




However the var state just return "undefined"

Thnaks !
 
Bartender
Posts: 2968
6
  • Likes 1
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
What is it that you are actually trying to do? Looking at your code makes me wonder whether you are loading images that are generated in real-time - like in a security console - in which case the entire idea of "pre-loading" goes out of the window because you are always loading images that didn't exist before.

If that is the case you may need to vary your approach:
  • Load the image asynchronously into an element that isn't part of the DOM (javascript - Asychronously load images with jQuery - Stack Overflow).
  • When the load is complete replace the stale image element with the fresh one. Also use setInterval to schedule the next asynchronous loading of the next, more current image after ?? seconds (The ?? delay is primarily there to give the server a break - especially if you have a separate asynchronous request going for each image that is currently visible on the document).
  •  
    Edson Cezar
    Ranch Hand
    Posts: 119
    2
    • Mark post as helpful
    • send pies
      Number of slices to send:
      Optional 'thank-you' note:
    • Quote
    • Report post to moderator
    I ended that way:



    Thanks a lot for all !
     
    Bear Bibeault
    Sheriff
    Posts: 67620
    173
    Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
    • Likes 1
    • Mark post as helpful
    • send pies
      Number of slices to send:
      Optional 'thank-you' note:
    • Quote
    • Report post to moderator
    Be sure to remove the console statements before building for production. They will cause failures in browsers when the debugger isn't enabled.
     
    Edson Cezar
    Ranch Hand
    Posts: 119
    2
    • Mark post as helpful
    • send pies
      Number of slices to send:
      Optional 'thank-you' note:
    • Quote
    • Report post to moderator
    Thanks a lot !
     
    whippersnapper
    Posts: 1843
    5
    • Mark post as helpful
    • send pies
      Number of slices to send:
      Optional 'thank-you' note:
    • Quote
    • Report post to moderator

    Bear Bibeault wrote:Be sure to remove the console statements before building for production. They will cause failures in browsers when the debugger isn't enabled.



    Isn't it a very special moment when one comes to learn this? Say, you get a card returned to you from a QA tester. You new feature is performing perfectly in multiple browsers on multiple OSes. Except for IE. Only when you fire up IE, your code performs perfectly. QA says it doesn't. You say it does. You go watch them test. Sure enough, it breaks on their machine. Turns out, they didn't have the dev tools enabled (why would they?), yet you did. So for you, the errant console.log indeed logs to the console. But for them the errant console.log causes a hard JavaScript error on the page, leaving the page in an unpredictable state.

    Not that this ever happened to me, of course.
     
    Bear Bibeault
    Sheriff
    Posts: 67620
    173
    Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
    • Mark post as helpful
    • send pies
      Number of slices to send:
      Optional 'thank-you' note:
    • Quote
    • Report post to moderator

    Michael Matola wrote:Isn't it a very special moment when one comes to learn this?



    Yup. Got the scars.
     
    reply
      Bookmark Topic Watch Topic
    • New Topic