I am having a webApplication which showe user records in tabular formate (200 row at a time). Problem is these rows contains multiple images and they are served based on the request URL.this results in a request being generated per image, which leads to performance decay.
Question:
Is it possible to create spriteImage for dynamic images? I'm looking for something that I can use in order to aggregate these images into a single sprite at runtime without storing it into disk.
One possibility is to generate the images as Data URIs. This would include all the image data in the response, ready to be displayed by the browser without making additional requests.
I.e. instead of a normal HTML page where you'd have
<img src="http://myserver.com/img/123.png"/> which would create a request to the server, you would include the data directly in the page as
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" />
If you're not satisfied even with that, the last option would be to bunch up all the images to a single huge image, load that offscreen and use CSS trickery to grab parts of the big image to be displayed.
If all else fails, get a beefier server, they're not that expensive.
Related
I am trying to automate a workflow for automatically creating HTML newsletters based on information stored in a spreadsheet.
Currently, I am using a newsletter drag and drop tool, in which several pre-programmed blocks are available (e.g. full column block, 2 column block etc). When creating a newsletter, I drag and drop a block and fill in my content (e.g. uploading an image, inserting a url). This is all well and good, however, since I have to create the same newsletter in 10 different languages, this process is quiet time consuming and prone to human error. While all newsletters are the same in terms of layout, the images and urls differ.
To solve this issue, I would like to get rid of the drag and drop process, and instead automate the workflow in some other way.
One idea that I have already tried, but that doesn't seem like the perfect option to me, is to dynamically create the needed HTMLs in Excel. Basically, the idea is to take the existing block template structure, and put it into Excel with some formulas.
I could then copy and paste the links to the images (in a simple format, such as EN1.jpg, ES1.jpg, etc.), as well as to urls (url.com, url.es).
This is some example block:
<img alt="" align="center" width="700" style="max-width:700px;" class="resetWidth" border="0" src="IMAGE" />
My final expected result is something like this:
I define the layout in a very quick manner (e.g. writing fullcolumn, half column, fullcolumn). The corresponding code is taken from the template. I then provide the attributes (image url, link url) in the form of a list or so. The end result should then be 10 html files that I simply have to upload to the newsletter software.
I would appreciate it very much if anyone had any ideas on this.
Another option for translating the page is to do something like this https://www.w3schools.com/howto/howto_google_translate.asp
it adds a selection for languages to translate into.
As for automating the images, you could set up folders for each langauge and reuse the name of images based on where you want them so they would be placed in the correct location.
All you'll have to do it replace the images with the same file names and swap the default language on the Google Translator.
So something like this that the html will stay the same with regards to the image names
For the link variables you may be able to write some JS or another language to take advantage of the
<html lang="">
and based on which lang is set, insert a set of links to the file.
I am building a web application, it is catalog for static ship information, I collect data from different sources. One of them is https://www.marinetraffic.com/, I use this source also to retrieve an image of the ship. Retrieving an image is as simple as this:
<img src="https://photos.marinetraffic.com/ais/showphoto.aspx?mmsi=273914200>
That will load this image:
<img src="https://photos.marinetraffic.com/ais/showphoto.aspx?mmsi=273914200">
Note mmsi part in the url this is one possible identifier a ship can have, the problem is that ships can have multiple identifiers so is there also a imo number, callSign and eni number. On https://photos.marinetraffic.com/ it is possible to search for ships on both imo or mmsi number to retrieve an image.
So this <img src="https://photos.marinetraffic.com/ais/showphoto.aspx?imo=6600553">
Returns the same image:
For this particular ship I have both identifiers in my database, but there are also ships with only one identifier. For example I have this ship with only imo number 7361518 when I want to retrieve the image I try to do this:
<img src="https://photos.marinetraffic.com/ais/showphoto.aspx?mmsi=7361518"
But that returns a 404 error.
Currently I solved it doing this:
<img width="100%" height="100%" src={`https://photos.marinetraffic.com/ais/showphoto.aspx?mmsi={id}`}/>
<img width="100%" height="100%" src=`https://photos.marinetraffic.com/ais/showphoto.aspx?imo={id}`}/>
So I am placing two image tags above each other passing the ship id value to the url, the id can be either imo or mmsi number, this causes on of the images not to load.
this causes in a result like this:
Note the not loaded icon at hte bottom, I am thniking of some sollutuion but cant figure out how to do it:
Check the HTTP status code and then display the image
Display an alternative image when ship does not load with mms with a fallback to imo
Remove the image not loaded icon, to make the image invisible when image has no result.
So after this whole explanation of a case study, a real wrold scenario and the image problem does anyone know an implementation to any of my sollutions or have an addiotional sollution for this problem?
I've used one static cfm page and it's has a single select query for showing a above 3000 records(without pagination). When i am try to view that page in FF its takes the 15 sec for shows the content. If any way(without pagination) to reduce the browser loading time?
Create a page that uses that uses AngularJS to show the table. Then populate the table via an AJAX call to get JSON.
Use fixed table layout so that the browser does not have to re-flow the content as it loads.
Don't load the data into a table at all. Do the layout with div's and span's
Optimize the SELECT query
Only select columns you need.
Avoid wildcards (*) in the SELECT clause
Don't join unnecessary tables.
You can also consider loading content dynamically via ajax.
Without seeing your code (or example code), we can't provide anything specifically tailored to your implementation of the query.
You could potentially
<cfflush>
the content, so it will start sending the response to the browser straight away, rather than building the entire page, then pushing the response back
Some other solutions are better options, especially for long term scalability and maintenance. However, if you're looking for a quick solution for now you could try breaking it up into a series of HTML tables. Every 500 records or so add this:
</table>
<cfflush>
<table...
This will insure that html rendered so far is sent to the browser (via the cfflush) while ColdFusion continues to work on the rest. Meanwhile, by closing out the table before doing so you're allowing the browser to properly render that block of the content in full without risking it waiting for the remainder.
This is a patch, and something you should only do until you can put a more involved solution (such as JQGrid) in place.
We have a web application that creates a web page. In one section of the page, a graph is diplayed. The graph is created by calling graphing program with an "img src=..." tag in the HTML body. The graphing program takes a number of arguments about the height, width, legends, etc., and the data to be graphed. The only way we have found so far to pass the arguments to the graphing program is to use the GET method. This works, but in some cases the size of the query string passed to the grapher is approaching the 2058 (or whatever) character limit for URLs in Internet Explorer. I've included an example of the tag below. If the length is too long, the query string is truncated and either the program bombs or even worse, displays a graph that is not correct (depending on where the truncation occurs).
The POST method with an auto submit does not work for our purposes, because we want the image inserted on the page where the grapher is invoked. We don't want the graph displayed on a separate web page, which is what the POST method does with the URL in the "action=" attribute.
Does anyone know a way around this problem, or do we just have to stick with the GET method and inform users to stay away from Internet Explorer when they're using our application?
Thanks!
One solution is to have the page put data into the session, then have the img generation script pull from that session information. For example page stores $_SESSION['tempdata12345'] and creates an img src="myimage.php?data=tempdata12345". Then myimage.php pulls from the session information.
One solution is to have the web application that generates the entire page to pre-emptively
call the actual graphing program with all the necessary parameters.
Perhaps store the generated image in a /tmp folder.
Then have the web application create the web page and send it to the browser with a "img src=..." tag that, instead of referring to the graphing program, refers to the pre-generated image.
I have a webpage which contains about 20 - 50 dynamic images (images served from a non-static source). These images are served through a servlet based on the request URL. This results in a request being generated per image, which leads to performance decay.
If these images were static, I would create a CSS sprite and replace the 50 requests with a single one. As they are dynamic this is not that easy of course. I'm looking for a tool/library/method that I can use in order to aggregate these images into a single sprite at runtime. Luckily image size is constant and the same for all, which should make this much easier.
Any suggestions?
You can check and try jawr (https://jawr.dev.java.net/) library for generating/modifying (also compressing, merging) css files on servlet. It has option to change background images dynamically.
You may arrange bundles for switching css file(s) for changing skin(s).
Plus side: You can also manage and arrange your .js files too!
You can append images with the free ImageMagick library, via a call to the system command line, so you have a lot less to code in Java and it is faster.
For appending horizontally, use this command:
convert image1.gif image2.gif image3.gif +append result.gif
For appending vertically, use this command:
convert image1.gif image2.gif image3.gif -append result.gif
For more informations: http://www.imagemagick.org/Usage/layers/#append
So, with CSS you can display the sprites using a single image with a simple offset (you can use the CSS "background" propriety for load the image and set the offset of the single sprite that you want to display). No JavaScript is required if you do only simple things.
Is the processing overhead on the server worth it?
I'm thinking about this now for C#, trading of the added complexity creating the dynamic images and sending them to the client, with the reduction in individual image accesses.
A trade off worthy of a bit of analysis.