I have a script that fetches a JSON object with images URLs from a server via AJAX. The number of image fetched is random and can range from 60 to 300. The script is getting the JSON from the server at a fixed interval.
To prevent network issues, the server returns a base64 of one image at random so the front-end script can store it in a "cache" object. Eventually, the "cache" will fill up with enough material to take over if an AJAX request has failed.
The "cache" also checks how many base64 images it contains before adding a new one. If it reaches its limit, it overwrites the oldest base64, effectively pruning the data.
I've installed a monitor application on the machine I was testing with and Chrome hangs after 21 hours or so. That means approximatively 260 AJAX requests, potentially up to 78k images and a "cache" JS object storing 260 images in base64. Is something wrong with my process?
To recap, here's the whole thing:
Front-end send AJAX request to server
Server replies with a JSON object filled with images URLs and one JPG in base64
Front-end creates <img> tags with the URLs and stores the base64
If the server fails to reply, the front-end use its stored base64 images
Repeat process to infinity and beyond
Chrome crashes after 21 hours
Any help appreciated!
Related
Pretty new to web dev so my apologies if it's not very clear.
I have an image processor in my backend that takes varied amount of time to process an image depending on its size, type etc. The number of images that can be sent is anything. I am trying to send multiple images into their api calls from my front end so that all images can be processed in parallel.
Now on my front end side I don't want to wait for the final response, but instead serve any response that my backend sends back (let's say backend got 5 images and processes the 4th image first. I want to show the 4th image anyway and continue showing images as and when they arrive)
I have tried promise.all() but i still have to wait until all images have been processed. Is there any other method that can help?
Simply use await instead of promise and it should work fine
Currently I am getting data from a hardware device(charge/load controller) over WiFi, it has an ESP8266 configured as an AccessPoint.
The WiFi is setup to ignore all request from computer, just send its data once per second.
The data is a single string representing about 20 JavaScript Variables...
var xx1="text1";
var xx2="text2"; etc...
I get the data by refreshing the HTML5 page, process with JavaScript & logging to localStorage.
It all works well except I can only refresh about 3 second interval minimum for reliable consistent data-logging. The browser (FireFox) takes a while to complete refresh.
Q. Is there a way I can get every 'data send' using JavaScript without page refresh, this way I can log just the periodic strings I choose from 1 second to xxx second.
I suspect I might need to install some library component to access with my JavaScript ?, i would need to embed this into my HTML file if possible or have it reside in the same folder.
I have been learning JS for about 2 weeks now, getting most from examples & my mistakes.
I am developing a MEAN stack application and i want to display the images with some responses.
Exact Requirement: There is search box , when user enter the name of the image , server should respond with that image and browser display that image.
I have maximum of 70 images with size 30kb maximum.
Should I store these inside the mongoDB and for every request node server hit the mongodb and serve that image in the response or I serve it with Angular.js?
Please recommend the efficient way to do that.
You can setup a folder for static content (CSS, images, etc) do it in your expess.js configuration probably you'll find something like this:
app.use(express.static(path.resolve('./public')));
app.use('/images',express.static(path.resolve('youPathToStaticimages')));
Then create a collection with the image metadata, like file name, size, uploaded date, friendly name and maybe tags or any other field that you can query.
Then use an endpoint / $resource combination and retrieve the data and display the images in the client with a simple HTML image tag (IMG) and use ng-src, probably within a ngRepeat.
For me that could be the easiest way to do it, also you can set some sort of cache policy to your image folder in apache or ngnix.
You've got a little over 2mb of data which can be easily cached. Transferring from the database to the web server or retrieving from disk is extra work. Load all the images into your node thread and when the keyword comes through send the cached image.
I'm reading TIFF and PDF files off a network drive and returning each page as an image to the browser which get displayed as JPG. This part works fine. However I'm finding it inefficient because I first have to make a request to the server to determine how many pages the file has, which results in reading in the image on the server, getting the number of pages and returning that value. Once that value is returned to the browser, I then have to make a request for each page to be returned as an image, so the file on the network drive is read in again, and the requested page number is returned as a byte[] representing a BufferedImage of the page.
What I'd ultimately like to do is make a request for the first page in the file, and then in the response to the browser, indicate the number of pages in the file so that each additional page can be requested. This would reduce the amount of requests as no initial request would be required just to determine the number of pages.
I'm not sure if this is possible. I've spent some time researching to see if I could get response headers from images, but haven't found anything.
Why not adding the info to a cookie via reponse in your image-serving controller?
If you name the cookie in a way that would "link" it to a specific set of images you wouldn't need to hassle with "how can i read headers of an image?"
I have some images in a folder save automatically from a web camera naming by current date_time. Now i just want to load each image after some seconds(let say 4 sec) which matches to my server current date_time.
Using java script..
I can get server time using PHP
**
I more simple words, Is there any
jquery plugin that load images from
folder with respect to image name
where the name is based on current
date_time?
**
Thanks
You can't know the exact server time from from javascript(unless your server and your computer are the same one). Getting time from server using any of the server languages to synchronize time between client and server will not work because of the response time of server. How about another idea. Write a page on server that will return list of last images(or last image), query it with javascript and show the last image(s).