search

devBanner / devBanner_Frontend

Responsive web page for devBanner (WEB)
https://devbanner.center
Apache License 2.0
10 stars 8 forks source link

Generating Feedback #10

Closed LoganS1 closed 6 years ago

LoganS1 commented 6 years ago

We need to show the user that the image is loading. Currently, the generate button is pressed, and then behind the scenes the "banner" img's src is being changed, which leaves the image remaining the same until the server responds. Maybe we can change to:

  1. example banner is deleted
  2. a loading img is displayed in place of example banner
  3. create new img
  4. set its src to server query
  5. place it off the page (or just invisible)
  6. test every 1/2 second(?)
  7. when naturalwidth/height are no longer zero replace loading img

Is there any better ways of doing this?

Kimmax commented 6 years ago

Jesus. Include jQuery, intercept the form submit, create an ajax request and use the corresponding events to show a loading spinner until you hide it when the completion event fires

LoganS1 commented 6 years ago

I'm going to be honest... I've never used AJAX. However, after a few tutorials, the current way of getting the image seems terrible. I am going to try to rewrite the code to use AJAX and then, if I can, add a loading spinner...

LoganS1 commented 6 years ago

I tried using AJAX, but the response data would be encoded wrong. I looked for a solution, including plain XHR requests but to no avail (Most answers suggested changing the img's src attribute to the query directly as AJAX requests are meant to be HTTP or JSON/XML). I did however find that images have an onload and onerror events, which I used to display a simple CSS Loader in #11.

Kimmax commented 6 years ago

Ajax request are XHR request down the line. You misunderstood one thing:

AJAX requests are meant to be HTTP or JSON/XML

HTTP is the transport layer and will be used in every ajax/xhr request. Json/XML are just plain text data formats that are being transported on HTTP. It works the same with images. The webserver response with a mime type of an image, eg. image/png , indicating to the browser that was received in that request should be interpreted/rendered as an image, encoded as png. When receiving json the mime is set to text/json and xml would be text/xml. You see where this is going

LoganS1 commented 6 years ago

Thanks for the explanation @Kimmax