Google Drive Picker keeps loading thumbnails even after closed - javascript

I am using Google Drive picker (API), the drive has too many image files in it, whenever anyone opens the picker, thumbs keep loading, even after the files are selected and the picker is hidden, that eats up bandwidth very badly, I need to stop this behavior so as to save bandwidth, so I can either hide thumbs from the beginning, or tell the picker callback to stop loading thumbs, but I could not find a way for implementing any of these two approaches.
It is also worth mentioning that the picker loads original size image thumbnails (the thumbnails are just down-scaled original images, and consequently, their size is so huge, so imagine the bandwidth it takes to load a large number of thumbnails).

I see that the picker stops retrieving the thumbnails once I close it. However to reduce the amount of thumbnails, you could set the view mode to list. In this way the UI will show the elements in drive as a list and it will show the extension icon instead of the content thumbnails (eg, Spreasheets, docs, pdf, etc). As far as I have tested, only images and videos will show a thumbnail with the content of the file.
As all the files with the same extension will share the same icon, i think this will reduce the bandwidth it will take to load the files.
You can set this view as follows:
.addView(new google.picker.DocsView().setIncludeFolders(true).setMode(google.picker.DocsViewMode.LIST))
Hope this helps.

Related

Using background image for whole page consumes a lot of memory

Recently I am adding support for changing background image in my extension. The extension UI has a left navigation panel, a toolbar and a data list(table). Since I want a transparent background image for the whole page, I learned that the only way to do so is to create two divs in same level, one for background and the other for wrapping all my UI contents (the method here https://stackoverflow.com/a/3241421/2758907)
The problem is that, with this method, my extension uses 170~180mb memory(as seen in Chrome's Task Manager). But without background(the only difference), the extension only uses about 37mb memory. Do you have any idea of what's going wrong?
The image below shows the full UI. Adding that background image to the whole page increases memory usage tremendously. The image is of jpg format, size: 1280x850

How to watermark only original images?

I am trying to protect my website content by putting scripts to deny the right click and to see the source code in the browsers. But this is not sufficient. I want to know how to watermark only the original file and not the image that is seen on the webpage.
For example, an image that users can see on the web without watermark and when they click right and select "Open image in a new tab" they go to "website.com/image.png" and they see the watermarked image.
Is this possible?
P.S.: Sorry for my bad English, I'm not a good writer.
Thanks
Serving users a image which is not watermarked is not a good idea because they can download it easily so the best way will be watermark every images and render it users by slicing it. Slice the image and show only the image and hide the water mark and whey they will open it in new window full image will be loaded with the water mark
For creating Watermark on the fly with php
http://www.developphp.com/view.php?tid=1147
And for slicing image i don't know how to do that but i know it is possible but there are many ways to do it like you can zoom it to hide watermarks.
First of all, this will not stop them from downloading the image without watermark, because they can disable javascript, or simply right click on the image and save it right there, or the worst: simply do a print screen and save it to paint then crop it. Probably the best option is to have watermark on all of your images, on the website and on the direct access.

Javascript image gallery - too many images and page loads very slow

I have an image gallery. It is powered by highslide and page contains the resized images previews (for example 100x100px, when you click on preview, fullsized picture is displayed, but that is not important...).
Images are uploaded to the gallery by users, and problem is, that on some point, about approximately 100 images on one page (=100 images which need to be resized by webbrowser for preview), page is loading VERY slow and freezes all the time.
Q1: Is there any javascript which will display for example FIRST 40 pictures (first 40 lines of a file) and other pictures will not be loaded? When I click 'next' it will display pictures 40-80, then 80-120... I dont even know if something like this is possible.
Q2: Or a javascript, which will load only pictures which are currently on the view? I found that one, it works fine, but when I scroll down to the end of my gallery, all the images have gone through my viewpoint, so they are loaded all... and it freezes aggain.
Q3: Or a script that will automaticly devide my page to tabs(each tab with defined file length)?
Thanks for every solution!
/EDIT
To: Frits van Campen
I have tried Lazy Load - http://www.appelsiini.net/projects/lazyload , but deviding into tabs would be more usefull.
//EDIT
TO: Mörre
I know that it would be much better if images was already resized and stored on my server, but either the original-sized images arent stored on my server, I have only src address of them.
just reduce the image size by their pixel.

Multiple image sizes vs browser image resizing / scaling

I have a page where I will be loading a couple of different sizes of the main image; although not all the large images will be loaded at once.
The scenario is this..
I have a slider which contains the thumbs for all the larger images; these all load when the page does.
The default large image loads when the page does, but the other large images only load if the user clicks on the thumbnail for that image and then I replace the src of the large image as so..
function changeMainImage(image) {
// Set big image
var big_image = image + '-big.png'
// Update main image url
jQuery('#main_image').attr('src', big_image);
}
Now because the large images don't load when the page does, this causes a small delay for the large image to show, which is rather undesirable.
Now I'm thinking that I could kill two birds with one stone with just loading the large image and no thumbs and just have the browser scale the large image into a thumbnail; I just kinda cringe at doing it this way as I have always hated sites that use this method for thumbs, but in my case it seems valid as I need to load the large image anyway.
This would allow me to reduce the number of http requests by 1 * amount of pics and also give me instant load of the large images once the thumb is clicked.
My only concerns are trying to figure out how to give the browser the correct dimensions so that the image scales to the correct proportions and also the fact that if the page has say 12 images; this way I am making the user download all 12 large images at once when they make not even be interested in looking at all 12.
Both versions have pros & cons - any advice what to do here?
The method you currently have is what I prefer to do. Load what is visible.
Now, to make the user experience better, many sites use a couple techniques. The first would be to pre-load the next image or two. If you have a slideshow-like display and have a good idea of what order the images will be displayed in, this is good.
The second is to display the thumbnail while the large version downloads. If your thumbnails are of a decent size, this lets the user get visual feedback that their click worked, and on decent connections the image will be downloaded soon after.
Finally, I recommend using progressive JPEG (if your images are photos) so that they are enhanced as they load.
For your data on sizes (and any other metadata), keep that in a JavaScript array of objects, or wherever else you store your image data. You can easily use JSON for transit from the server.

Efficiently loading hidden/layered images in web page

I have a layered div component which displays a successive series of large kb images by slide-animating away the top image to reveal the next image below. I'm trying to understand how best to approach this.
Approach 1:
layer a number of divs on top of each other, each with an image assigned as background, and slide away the divs as needed.
Will the hidden divs load their images on page load, or only when they are revealed? Is this browser/client specific behavior? Do all images (jpegs, pngs) behave the same way in this regard?
Approach 2:
Use only two divs- One that handles sliding, the other that will load and reveal the next image.
In this case, is it possible to pre-load the next image, so that the javascript isn't slowed down when the next image is revealed?
Thanks- and if anyone has other ideas, I'd love to hear them.
Your first approach, even if the images are 'hidden' via CSS, will load all images by all browsers via HTTP requests. Your second approach or some variant of it is probably better.
I'd recommend using AJAX to pull down each image as you go. It's definitely possible to preload the images.
You may want to consider existing slideshow/lightbox type of plugins for jquery or javascript. It's been done so many times you will sort of be recreating the wheel (unless it's more of a learning experience thing)..
Here's an interesting example of preloading with callbacks to alert you when it's ready. Maybe a good one to adapt?
http://binarykitten.me.uk/dev/jq-plugins/107-jquery-image-preloader-plus-callbacks.html
The first approach certainly degrades better. It will leave the images available and visible if viewed on a CSS-challenged browser. But that comes at the cost of having to pull down all the images from the get-go. The second approach is lighter on the initial hit, at the cost increased code complexity swapping images in/out.
You can definitely pre-load images with Javascript. just create an image object and set its source to whatever you want, which will automatically trigger downloading of the image. It doesn't have to be inserted into the DOM or visible to the user to do this.
Hidden divs SHOULD load their content automatically, whether they're visible or not. I can't think of any PC-based browsers that wouldn't do this, but I'd hazard a guess that some browsers intended for resource-limited devices (cell phones for one) might optimize things and delay loading contents until the container's made visible, to save on network traffic.

Categories

Resources