I am mixing some javascript zoom (not much experience). I use
div image1 fit to screen/div
div (show together)
div image1 zoomable div
div image1 small zoom navigator div
div
when I click the one the other div hides and vice vera.
I don't know if the image is loaded three times, it loads immediately cause it runs locally on my pc. If the image is really loaded three times is there anything I can do to avoid it?
Thank you all,
in advance!
You can use the web-developer tools built into Chrome or IE (and available as a plugin to Firefox) to determine whether the image is loading three times. But unless something strange is going on, it will only load once.
Related
The past two nights I have been struggling with an issue in React. I have a website that has multiple images (a header, some gallery images, some cool photos). I want the page to render in whole the moment all images are correctly loaded.
There are people that tell me to use the lifecycle hooks, but that doesn't seem to work because the render proces is faster than the time some images need to load in.
This one time I thought I managed to get it working by doing the following: Add inline styling to container div saying display none. Then add onLoad={method to trigger a display: inherit} to the container div.
But when I used a bigger image (of 15MB, just to test it out) the loading was perhaps a succes but still took time to show on the page. So it didn't work afterall. It just 'looked' like it worked cause the other image loaded faster.
Anyone has any other idea's to tackle this problem?
Best of wishes,
If you know the number of images you have on the page you can do a counter that starts from zero and put an onLoad on each image which adds one to the counter when the image is loaded...then do a condition:
{counter===numberOfImages? <Content><Content/> : null}
sorry if asking this question in wrong place.
I have a web page (asp.net / vb) and each section of the web page is built in divs inside a bootstrap grid.
Using the code behind, I am adding onclick events to each bunch of div's to do certain things. Every single div/onclick works on the page apart from just one that will only work if I set the div to something like 100 pixels deep.
I am in safari.
I have tried allsorts - binding with jquery click/tap etc but nothing apart from making the div really large.
I dont understand how only this one div could cause problems.
This text box wont let me paste html in to show.
If anyone could suggest anything I would be really grateful!
C
You are likely facing an issue where you've got one element covering up another. Check to make sure that you don't have any other div's that are too wide and happen to be covering your link on the iPad. This would explain why when you move it to 100 pixels deep it works.
I'm working on a website that hosts music, pictures, and videos. I currently have 4 pages, a title page, a music page, a video page and an image page. This works well, but I would like to be able to incorporate the ability to play music and look at pictures at the same time. To do this, I created one HTML document with each former page inside a div with a descriptive class name. Then, I wrote a javascript function that shows and hides each div when it is called, so the page acts like it's 4 pages but it isn't. So i embedded the music player in a footer div that stays open as music plays, meaning you can switch back and forth between each media type while keeping the music footer open and playing. This is where the problem lies. When this is done, the image magnifier jquery function I used on my image page no longer works correctly, UNLESS the image div is shown at the beginning when the page opens. It's only then that you can switch between media types and still magnify the pictures. If the title div is shown first (like it's supposed to be), and you go to try and magnify an image, it doesn't work.
At first I thought maybe some of the external javascript libraries were negatively interacting with each other, but then I happened upon what I explained above and now I'm just at a loss as to why the images need to be the first things displayed for the magnifier to work correctly.
The jquery code I'm using is called jQuery Image Magnify and it's made by Dynamic Drive.
Edit: The way that I'm hiding and show div's is with style="display:none" to hide and style="display:block" to show.
Interesting question. Probably because the element needs to be actually visible for the jQuery Image Magnify function to run. I'm willing to bet that plugin uses imageElement.onload for the image magnification handler or something like that, which I think doesn't work if the image element is hidden.
As far as a solution goes, try setting your image to visible at when the page first loads, maybe with left set to -9999 px or something silly like that so it's technically still "visible" but the user can't see it. Then, after the image has loaded and (hopefully) been magnified or whatever the plugin does, move it to be a child of the div its page is supposed to be on and get rid of the negative left value.
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.
I have a fairly basic thumbnail-and-view page going. As each thumbnail is clicked, the central pane shows the full-size image. This bit works fine - I'm using Javascript to show and hide the divs which contain the large images, but as the page first loads, it starts loading all of the images at the same time. This causes the first image the user sees to be brought in very slowly.
I have experimented with creating the divs on the fly, but then I'm stuck with the undesirable effect of having to wait for load of every image. Ideally, I'd like to use my current setup - just show and hide divs - and have the hidden divs start loading their contents as soon as the first pane has completed. Is there a way to set the loading priority on visible divs, such that hidden ones don't get network time until all visible divs are rendered?
I think what you want there is to combine your 'creating the divs on the fly' (for the non-visible divs) with image preloading. Should get you what you're looking for.