Using jQuery to target an image before page loads - javascript

I have a website I am working on that has an image gallery, and the user is uploading huge images. The div I have the image gallery containing is set to a certain 400px width to match the layout. The issue I am running into is on page load, for a split second, the first image in the gallery loads on the page at normal size (huge), and then the css kicks in and resizes the image to 400px. I am wondering if there is a way to target and change image size before the site code is rendered. Something like:
jQuery( window ).load(function($) {
//step 1: find the image using the unique css class it is inside
//step 2: resize image to 400px
//step 3: let rest of site html/css/jquery load
});
I am using $(window).load instead of $(document).ready in an attempt to target the image before html/css/jquery kicks in. Any insight/help on this topic would be greatly appreciated.

Try adding the width and height attributes to the image element. Your CSS will override these properties when applying styles to a specific class. Furthermore, you don't need to mess with JS.
<img src="image.jpg" width="400" height="auto">

Related

How to dynamically change cloud-zoom Zoom Image 1.0.2 using javascript

I have found ways of changing the zoom image using links with rel="smallImage:image1.jpg" etc, but I am creating an image at runtime and adding it to the page, so the link will not be there when the page first loads (which it seems like it needs to be).
When I generate the image at runtime, I add a thumbnail to the page and a link to open the thumbnail as the large image. I then want to be able to hover over this image to get the cloud-zoom functionality, but even if I use the code I mentioned above to set the image, I still see the original image as the zoom image.
I was wondering if there was a way I can use JQuery to change the zoom image at the same time I change the source of the image? I was hoping for something as simple as $("image1").CloudZoom.zoomImage = "image2.jpg" but nothing like that seems to work.
Thanks guys
You can place the thumbnail in a div and give the div an onclick event.
<div onclick="DisplayThumbnail(ImagePath)"><img src="ImagePath" /></div>
Call a javascript function and add this:
$('#CloudZoom').attr("href", newimagepath);
$('.cloud-zoom, .cloud-zoom-gallery').CloudZoom();
The cloudzoom uses the anchor tag's href to point to the image to use, so that is the reason we update the href to the new image tag.

lazy load? / load images only when visible in viewport

I have a long list of <div>s that contain <img />s and I don't want the page to be slowed down by the loading of all the images.
So, right now, I have the url to all the images in the data-src attribute and the src attribute is empty.
How can I load the image, move the contents of the data-src to src when that div or img is visible in the viewport with javascript / jquery?
By visible in the viewport, I mean when the user has scrolled to those images.
All the images are in divs, which are in a vertical list.
You can use lazy load plugin in jQuery.I think it is best suited for u
Lazy Load is a jQuery plugin written in JavaScript. It delays loading
of images in long web pages.
SEE HERE

Javascript: Possible to get image dimensions before images are fully loaded?

I am building a mobile version of a website where the page data loads very quickly, but since the images on the page are large, they come in more slowly over time.
The issue is that as the images come in slowly, they push the content of the page down so the user loses his reading position.
What I want to do is determine the sizes of these images and then leave a correctly sized black placeholder for the image which will fill in with the image as it loads. So that the users reading experience is not jarred while the images open.
I was wondering if its possible to get the dimensions of the images with javascript or html5 before the image loads and then go in with jscript/html5 and set width and height attributes to the tags on the initial page load-- before the images fully have loaded.
Thanks!
*EDIT: I cannot use the width and height HTML attributes off the bat, since the images are from all different sources with no pre-known width and heights (its mostly random user posted images)
This is what the height and width attributes are for on the <img /> element. Set those to the height/ width of the image, and that space will be reserved by the renderer.
Otherwise you're in a chicken-and-egg situation; you can't magically find the size of the image; you need to download it first!

How to execute script as soon as we know true height (with images) of ajax-loaded element?

Say I have a page index.html where my scripts are running, and a page content.html which is a very large, rich document full of images and styled text. I'm loading the contents of content.html into <div id="container"></div> on my index.html with:
$.get("content.html", function(data, textStatus, jqXHR) {
$("#container").html(data);
contentLoadedCallback();
});
In the above example, contentLoadedCallback() is called as soon as the content html is inserted into the container. But what if I want to do something in that callback that needs to know the full height of the container, such as initialize a custom scrollbar? $("#container").height() won't be accurate yet, because all the images have just started loading and they will change the height of the content as more are loaded.
I'm now using https://github.com/desandro/imagesloaded to detect when all the images in the content are done loading and then firing my callback then. However, this slows everything down... my page has a big "loading..." message above the container for the entire time it takes to load every image.
I can tell that the document seems to "know" the height of each image before it's loaded, because just as an image begins loading, the rest of the page moves to give it just the right amount of space. The image is given its own "container" of the correct size, and then the image is gradually loaded into that space. What I want to do, ideally, is capture the event of that image "container" being in place, without having to wait for the image itself to fully load. And I'd like to compound that to being able to detect the full final height of (returning to my example above) #container, as soon as possible after i start loading content into it.
Is what I'm trying to do possible?
I assume those images on content.html were put there dynamically. If you have those image server side you could assign height and width attributes to those <img> tags and use them to determine the real size of your container a bit faster. If you don't know the dimensions of those images server side then it won't work.
Here some info:
Should I specify height and width attributes for my IMGs in HTML?

How does Yahoo! Image Search load its images?

I just recently noticed that when you click an image on Yahoo! Image Search it first shows a low resolution image which then gradually turns into a high resolution image.
Example:
Yahoo! Image Search
When you click the link above and click through all the images you notice that they're always showing a low resolution image first. Why are they doing it? Does the website appear to be loading faster to the user if they're doing it this way?
Also, could someone please point me into the direction on how this is actually done (preferably by using JQuery, in the case that they're using JavaScript to do it)?
They're using a cache of thumbnails from this URL
http://ts1.mm.bing.net/images/thumbnail.aspx?q=NUM&id=HASH
where HASH and NUM are (somehow) references to a particular thumbnail.
For example, NUM = 1148286928700 and HASH = d2f4bbf91a853cefbc18794b6eb9ecdd are a reference to this thumbnail.
Of course, thumbnails are smaller in file size than bigger images, so Yahoo! loads from a cache of thumbnails first to give the user a glimpse of what the image is, and loads the full size image in the background.
I suspect the technique they use is load the image in to a hidden img tag, and then bind to the load event of that image tag to a function which replaces the thumbnail src with the full size image src. Hence, when the (hidden) full size image is loaded, it replaces the thumbnail image we see on page load.
Let's assume the thumbnail image is loaded in to an img tag with an ID of main_image, and our full size image is loading (in the background) in a hidden img tag with an ID of secondary_image. Then we bind to the load event of #secondary_image, and replace the src of #main_image on load:
$('#secondary_image').load(function() {
// on big image load, replace the src of the thumbnail image
$('#main_image').attr('src', $(this).attr('src'));
}
Then when the user wishes to view another image, we replace the src of #main_image with a different cached thumbnail, replace the src of #secondary_image with the large image, and bind the load event again (so ideally you'd create a function with the above code, and call this function whenever you changed the #secondary_image src.
All they are doing is showing a thumbnail first, then waiting a bit (to save bandwidth for you and real site) then loading the real image. To do that, they are probably just changing the src attribute on the image, or adding another image on top.
Interesting to note that the thumbs are provided by Bing.

Categories