I have a web application with a large SVG that may contain thousands of high-resolution images.
I want to load them only when the user can actually see them, and not in advance. Is there any way for me to get an indication when an svg element becomes viewable?
Related
In my hybrid Android app I use inline SVG to display images that are large (of the order of 2Mb) and complex (several hundred SVG elements per image). When I need to change the image I do the following
var puzzle = document.createElementNS(SVGNS,'svg'),
kutu = document.getElementById('kutu');
puzzle.id = 'puzzle';
puzzle.setAttribute('preserveAspectRatio','none');
puzzle.setAttribute('width','100vw');
puzzle.setAttribute('height','85.5vh');
puzzle.setAttribute('xmlns',SVGNS);
puzzle.setAttribute('xmlns:xlink',XLINK);
puzzle.setAttribute('fill-rule','evenodd');
puzzle.setAttribute('clip-rule','evenodd');
puzzle.setAttribute('stroke-linejoin','round');
puzzle.setAttribute('stroke-miterlimit','1.414');
puzzle.setAttribute('viewBox','0 0 1600 770');
puzzle.innerHTML = SVG;
//SVG here is the SVG image content shorn off the outer <svg>..</svg>
if (0 < kutu.children.length) kutu.children[0].remove();
//remove old image, iff any
kutu.appendChild(puzzle);
//append the new image
While this is working the process of displaying the new image is slow. I suspect it is because of the innerHTML assignment above. Recreating through a sequence of createElementNS, puzzle.àppendChild would require me to first parse the incoming raw SVG content etc. Is that the way to go or would there be a faster way to display the content.
Once again for clarity - SVG here is the content of the new SVG image to be displayed shorn of its outer <svg>...</svg> wrrapper.
Just a side note it would probably be better to use setAttributeNS in place of setAttribute for consistency purpose since createElementNS is used, though it might not make a difference in speeding up the SVG image change.
In the case of a native app, a tool like the Android Profiler if using Android Studio 3.0 and higher can be used to analyze performance bottleneck. However since your app is a hybrid app, some sort of performance profiler that's applicable to the hybrid app (Whether it's Ionic or Cordova, etc.) can help to pinpoint where your performance bottleneck is.
Since your app is a hybrid, without knowing the resource capacity of your android app session, the guess is it seems to be a possible cause that it calls something like .setAttribute to set session-level attributes on the fly during the change of the image and the session resource might not be enough, and also the DOM has to perform .innerHTML and appendChild, which are dynamic operations. DOM manipulation is known to be slow.
Conversion of attributes of all the SVGs and store the result in some sort of storage or cache, and when needed, call it from the persistent storage or cache might be helpful.
Or consider using AngularJS to do the SVG change beforehand and preload the SVG images, refer to easily preload images in your Angular app. Here is another similar code to yours except it's using AngularJS to add SVG for starters.
Another simpler way, without changing your code, if you could minify the incoming SVGs beforehand, is to use SVG Optimizer or SVGO, a node.js open source project to compress your SVGs. Quoted from the SVGO link it says:
"SVG files, especially those exported from various editors, usually contain a lot of redundant and useless information. This can include editor metadata, comments, hidden elements, default or non-optimal values and other stuff that can be safely removed or converted without affecting the SVG rendering result." Although the performance gain might not be obvious going this route.
This question already has an answer here:
clipPath in multiple SVG tags
(1 answer)
Closed 5 years ago.
I have multiple svgs on one page and have exported them individually from illustrator. I also passed them through omgsvg which reduced the file size.
However, when I view the complete page with all of my separate svgs inserted (via my server side html rendering engine), many of the clip paths don't seem to be functioning. Some do and some don't, I can't work out why.
Svgomg helped but didn't solve the problem entirely. Some paths still don't function.
But all the clip paths work fine when loaded one at a time as individual svgs directly in chrome, or in the illustration program! They only fail when put together in the html page.
The cause of this problem is that during svg export, clip paths will be defined using standardised ids, chosen by your illustration program. If you export several files, each of these files may well use the same id names. Svgomg just uses letters, a,b... Illustrator uses SVGID_1_, ...
What you need to remember is the role of ids on an html page.
Ids must be unique. Clip paths are failing to work because you have the same id defined more than once when you insert multiple individually exported files. The solution is to think of your html page as a whole, and make sure your ids across all images you will have on a page will be unique.
I am inspecting a portal's page for loading of images ,its loading very slow.
We pick images from a filesystem , images name from database and read them, create a list and show results using a4j:mediaOutput tag. but the images are being loaded very slowly.
http://www.easyrenting.com/list-detail/3bhk-ardee-city-sector-52/6263
The first problem I see is that all your pictures are high-res (1800px x 2400px).
You really should create thumbnails server side to meet your view requirement and load images according of the size you want to show on the client size.
Have you only verified that your web page weight about 6.5MB including all images? (Check with Firebug).
I would recommand you a custom servlet like this one FileServlet supporting resume and caching with GZIP, and create a URL pattern according to load full res or thumbnail depending of the requirement.
There is no problem using the a4j:mediaOutput tag.
The images are getting loaded slowly because the size is too large, you need to find out a way to optimize the image size. Probably you can re-size the images before saving it to your file system.
Unless you are giving the zoom functionality, you do not need these big images.
That should help!
I have developed an LWUIT app. I have two types of images dispayed in the app. One coming from server side that need to displayed (like a photo posted and saved to server side) and one packaged in my jar and displayed mainly as icons (like a music icon, loading animation gif etc). I need to display all images according to the sreen size and resolution. The first kind is displayed by taking the screen display height and width and then use scale method and show a scaled version of the image. But however I have no idea how to show the second kind. i.e. icons. Example, my loading image looks good in most of the phones but for some phones like samsung, it looks blurred and over-sized. How to do this. My basic idea is to keep 3 types of images of icons like icon_width_lowXheight_low.png, icon_width_mediumXheight_medium.png and image_width_highXheight_high.png and show it based on the screen size. Please let me know the bets way to achieve this?
Thanks,
Parvathy
You should use MultiImages which were added in LWUIT 1.5. I don't have a link for this in LWUIT but our work in Codename One is pretty close to this so check out the How Do I? on multi images (and I suggest migration to Codename One regardless).
I think that you will need to use this
Image i = Image.createImage("your image path here");
i = i.scaled(widthValue, heightValue);
And put this values in relation to the Display.getInstance().getDisplayHeight() and Display.getInstance().getDisplayWidth()
Right?
Currently, I am loading a lot of placemarks on Google Earth on the website I created. Each placemark corresponds on a single file from the server. The placemarks are created one by one by the server coming from different images during initialization.
To ease the load of the server and the client, I am planning to change the implementation I mentioned using sprite image using css. Is this possible in Google Earth? I can't find any information about this. Maybe you can give some reference to do this.
Thank you very much.
Ability to use Image Sprites for Placemark Icons
I think you can do it something like:
ge.getFeatures().appendChild(me.placemark);
me.point = ge.createPoint('');
me.placemark.setStyleSelector(ge.createStyle(''));
var IconStyle = me.placemark.getStyleSelector().getIconStyle();
IconStyle.getColor().set(colour);
IconStyle.getHotSpot().setXUnits(ge.UNITS_FRACTION);
IconStyle.getHotSpot().setYUnits(ge.UNITS_FRACTION);
IconStyle.getHotSpot().setX(0.5);
IconStyle.getHotSpot().setY(0.5);
me.setLoc(lat,lon);
IMHO: if there are thousands of images in the sprite it will load it as many times as the number of placemarks on the map.