I'm trying to optimize the loading time of my website.
Does requesting the same image in different places of the code increase load time?
For example, I'm using an image as background of a button and I'm loading the same image in different places of the website.
Is this a problem or since the file is the same in all the buttons the browser only loads it once?
If it's a problem, how can I optimize it? Thanks a lot!
no, repeating the same image multiple times should load it only once. You could even go further and actually use css sprites to have multiple images in one (one image which is a grid of images as a background within a smaller containing div and move it around with background position property)
Related
I crating project to play with some sort of simulation. So i create map, this map is actually grid with cells, each cell is 2 actors - 1 background and 1 icon that show cell type - forest, mountain, person and etc.
Here how it looks:
All works just fine, but when i try to increase cells from 20x20 to 100x100 it takes about 20-30 seconds to load. It doesn't seems lags after it loads, so it works just fine, but now question - is there a way to optimize loading time, or it impossible?
Todays systems should be able to handle as little as 100x100 cells. I guess your problem is somewhere in your code.
Some common mistakes are:
Creating new objects in your render method (with the "new" keyword) instead of reusing your objects
Loading your images everytime you render them
Maybe you can add some code of your render method to the question. Without any code it's hard to see the problem.
I am attempting to make a small gallery like the one shown below -
I'm sure you've all seen them considering they are fairly common. When trying to make one using bootstrap I ran into a major problem. I can't seem to link the smaller bottom images to the larger top one that was when one of the smaller ones is clicked it changes to the selected image. I am attempting to use data-slide-to however it does not seem to work outside of the "carousel-indicators". I can't put it into the carousel indicators list because that moves the images up into the gallery (It may be possible to fix this with CSS but my attempts have been worthless). Does anyone know the problem? I've tried tags around each image that didn't seem to work then I tried divs. Still nothing.
Things I've tried:
encasing images in .
Moving the smaller images in and out of carousel inner.
Making a custom class for the smaller images.
Things to note:
I am using 3.0.0
All images are generated (if you haven't guessed already)
Smaller images are separate from larger one (not auto scaled down)
Things I plan on trying:
data-target
changing id
Changing class of div tag that encapsulates everything.
As it turns out bootstrap requires you to id the carousel as "myCarousel" and then use data-targets for each image. After changing the ID and setting the data target the gallery now works.
The conditions:
It's a movie website with approximately 1000 images of 15kb
Approximately 70% of all images will be loaded on a page visit
Images will have a long expiry date.
I think I will chose CSS-sprites because most images will be loaded by the visitors any way. But the CSS-sprite of all images are 9MB and 15000x2000px. Even if I devide it into 3 sprites it's 3MB :S
Maybe such big sprites will cause some problems?
Will images be cached by the browser even if they are 3-9MB?
Will the big pixel dimensions be any problem for the browser?
Lazy load or CSS-sprite, what should I chose?
Please advice me!
Yes this will cause problems:
Due to the sprite size and dimensions, it will significantly consum cpu power
if you use it often on one page, it could even decrease scrolling and at least DOM manipulation actions
9MB is too big, do you have a link to that sprite ?
The browser will cache it, if the headers are set correct, that is not the problem
And you dont want to load a 9MB Sprite that is mandatory for a site !!! Mobile ?!?!!
Gekkstah
My app has more then 1000 photos and 50 galleries. It looks like as iphone Photos app. In preview list of gallery I have problem with performance.
In profile I saw what [sourceImage drawInRect:thumbnailRect] take 96% of time.
What is the best way to fix this issue?
Duplicate with small size of images I did.
Perhaps there is another solution?
Best way is to create thumbnail images for every Image File and save them as thumb_orginalimagefilename.png.
You can batch edit images in many desktop publishing programs.
Photoshop or Fireworks. In Picasa you can just multi-select a ton of images, like an entire folder and then Export to File and choose the output size
Create three large images that contain all of the thumbs in each gallery and load them in one UIScrollView with semi-transparent UIImageButtons over the locations where the thumbs appear in the image.
This could prove faster, since you only load one image per gallery, but you would have to try it to find out. I have done this before as it helped to reduce the size of my app.
I want show per page pdf in portait mode and display two pages when rotate to landscape mode on ipad . I had search on internet and can't find any solution. I thought two possible way.
1.Using webview but I don't know how to display two page in one webview in a webview.
2.Using CGPDF API read from two page and merge to one pdf file. But I think this may be very slow and not sure if this could do it .
or any other way could solve this problem? Thanks!!
I don't think you will have much success with using a UIWebView there. There's however nothing stopping you from putting two CATiledLayers into a UIView and display them next to each other. In fact, that's exactly what I did in my iOS PDF parsing framework.
Just set the contentView as the containerView, that includes both tiled layers, and they work perfectly together. Keep an eye on your memory though, I wouldn't allow them both rendering pdf at the same time, that most likely crashes your app due to low memory. (Drawing a PDF is really resource intensive)