Using the DOM I plan to load images into a page that are outside of the viewport of the browser.
THEN
only after the viewport scrolls over to a position in which the image div is located
does the image asset load.
Is there a simple answer to this that I just could not find?
Related
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">
I have a webpage that waits for images to be loaded until they are visible in the viewport of the browser (lazyload). The dimensions of images are unknown. On the top of the webpage I have a link that jumps to an anchor on the bottom of the page. When a user presses the link the browsers scrolls to the wrong position of the webpage. I assume this is because the images are loaded in the browser and this changes the height of the page. In other words the position of the anchor changes after the link is link is clicked. Is there anyway to solve this paradox.
What you could do, is append a link and a div after the images are fully loaded.
For example: If the images are loaded, you could:
$("#someDiv").append("<a href='#SomeOtherDiv'></a>");
$("#someDivAtTheBottomOfThePage").append("<div id='#JumpToThis'></div>");
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
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!
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?