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
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">
Setup:
So, I have a narrow but long table (width:200px, height:2000px ish). This table is wrapped inside another div with fix height (300px) and overflow-y:scroll, giving a fixed height visible area. In the table, there is a lot of cells that are stacked vertically (see image and markup is simple regular table wrapped in a div).
Problem:
Each cell contains images, so if there are lots of cells that the page has to fetch including the images and data before loading the site then it will slow down the site significantly.
Solution Approach:
I am thinking of two approaches.
Apply lazy-load to images only. In this case (for example, from the image above). all three sections (section 1, 2 and 3) will be fully loaded except images that are not visible yet. Although it will minimize the delay if it has to fetch lots of data (for example 100+ cells), then I am not sure if it is the best approach.
Another approach is little bit more complicated but will minimize the delay as much as possible and is really ideal. So, when the page is first loaded, only the section-1 will be visible but section-2 will be also loaded (either with images or lazy-loaded images. Howeversection-3will not be loaded at this point.
When the user scrolls to thesection-2then thesection-3will be automatically loaded but not visible until user scrolls down. Ifsection-3is in the viewpoint, thensection-4` will be loaded but not visible. You get the point.
Any thoughts on it and how-to?
Thanks.
Do both. Make sure your images are always being lazy loaded, and only get the data for the next section when the user is scrolling and gets close to (or at) the bottom.
I use a lazyload image system where I specify my images like this:
<div class="lazyimg" data-src="path/to/image">
</div>
I give .lazyimg a width and height and then, when it scrolls into view, I load data-src and set background-image on the .lazyimg element.
This only works if you can specify a size independent of the actual image size, background-size: cover|contain are your friends here.
EDIT
Alternatively I guess you could load the image and then pop it in the DOM as an img tag, but changing the dimensions of the element could affect any sibling layout which could appear somewhat jarring, even if smoothly animated.
How to do it: onscroll callback.
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!
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?
I have so many images in a slide show and I need serve this slide show on mobile Safari. I noticed that whenever the page loads it gets stuck for some time until all images get loaded.
I decided to load images with a click event when ever I need them for specific action instead of appending all images directly into the HTML.
I want to use image pre-loading script and then I will add the image depending on the user action.
Will image pre-loading effect the page load time, or will this help me to improve the page load time and adding images as needed?
Also do let me know if there is any other way to achieve it. My goal is to load the page faster and also want to add images as needed which will not effect the animation quality and image rendering.
Image loading script
https://web.archive.org/web/1/http://articles.techrepublic%2ecom%2ecom/5100-10878_11-5214317.html
Use CSS:
a:hover {
background:url("menu2.gif") left top no-repeat;
}