i have a page on a website that is a giant list of logos. i only want to load the first 12 logos, and load 12 more when the user gets to the bottom of the page. i've seen this done all over the place, but i'm trying to figure out how to do it.
i don't want to load all the logos at once and then hide most of them, because the user is still going to have to wait for them to load...
currently all my images are in the same document, and they are each in their own div (such as #loadContent1, #loadContent2, etc). what is the best way to accomplish this feature?
thanks
There is a jQuery Plugin that called Lazy Load that can maybe assist you.
Lazy Load
Related
i have website with 200 post and each one have +50 pictures without text content and that slow down the loading of my website .. i want to split the loading of picture using a button when the user click on it will be loaded more 10 picture and so on till the end and i don't know how to add the js function to the word-press
i found some plugin but split to many pagy with <--next page -->
but i need some thing like that to keep the user in the some page
"Lazy Loading" might be able to do what you need, although not exactly what you would like to do with a button and javascript. It is an optimization technique that only loads a picture when it's visible on the area of the browser, and delay loading the rest of the pictures until you scroll down or when they should become visible.
You can configure that when a page loads, only the pictures that are "Above the Fold" (printed on the top half of a browser without scrolling down) should load, and delay loading the rest until a user scrolls down to reveal them.
You can check this document How to Implement WordPress Lazy Load on Images and Videos.
Check out these lazy load plugins:
https://wpneon.com/best-wordpress-lazy-load-plugins/
I have created a website that has 5 different 'pages' all on one page, so it is a single page scrolling navigation website. Instead of the users browsers loading the whole page when they load the site, is there a way in which you can load the different virtual 'pages' as the user scrolls down to them? From here I could animate the elements when they load.
If you're looking for an out of the box option, I would check out LazyLoadXT.
I used it on a site where I wanted divs to load as I went along. I'm sure with a little working you can get it to work by calling divs.
Suppose I have a python script that dumps a 1000 images on a webpage, when the user opens the webpage, the browser tries to open all of them at once, which slows down the page.
Is there any way to make sure that only those images are loaded, which lie in the current field of view of the user, to somehow load them depending upon the position of the scroll bar ?
We call this design pattern Lazy Loading. There already lots of plugins achieved it, such as loading images by scrolling. Say
Lazy Load Plugin for jQuery:
Lazy Load is a jQuery plugin written in JavaScript. It delays loading
of images in long web pages. Images outside of viewport (visible part
of web page) wont be loaded before user scrolls to them. This is
opposite of image preloading.
Using Lazy Load on long web pages containing many large images makes
the page load faster. Browser will be in ready state after loading
visible images. In some cases it can also help to reduce server load.
You can go to their web page to checkout the full example and api.
I've seen some similar questions about this around here but I didn't see anything that might be able to help me here. I am making a web site and I want each page to fade in on load and fade out when someone clicks a link. I have that down with jQuery but between the pages there is a white flash before the pages load. I tried moving around my javascript but in some cases the page didn't load correctly. I'm a bit new to this so I may need a bit of explanation on any possible solutions.
Here is the live site:
http://codyshawdesign.com
The HTML is valid in 4.01 Transitional. I've heard about something like Ajax or pagination but I am unsure how to implement those or what I would have to do to put it in my site or if it would even be the most ideal solution. Thanks for any help!
Shouldn't you only update a portion of a page, not the whole page? Now you have many full scale pages with different file names. The page address changes so the whole page is loaded. It's like refreshing the current with ctrl+r/cmd+r page and that isn't very ajaxy.
One solution would be to have a master page which contains all of the common elements between pages such as header, footer and navigation bar. On that page you have a div (or some other area) where you load information dynamically from a different file. What info is loaded could be determined with GET variables via anchor tags or ajax form buttons.
See for example this link and it's demo.
http://www.queness.com/post/328/a-simple-ajax-driven-website-with-jqueryphp
It's pretty basic but it demonstrates the idea not to load the whole page but only a portion of it. Add some styles and you're ready to go.
Sorry if this doesn't help. Maybe there is a way to refresh the whole page without the white flash. Easy solution would be to change the background color to white but then again, it wouldn't be very ajaxy...
With do pagination you would have to return all pages right when the the user visits your index.php and then you would use javascript to show and hide the right divs as the user clicks the links in menu, that's not good in your case, it'll make the user wait for the entire site even if he's not willing to look at all of it.
AJAX seems the right way, and u can easily implement it with jQuery load method. Just to get you started:
$(function(){
$("a").click(function(e){
e.preventDefault();
$("#pageContent").load($(this).attr("href"));
);
});
This should cause all your links to replace the content of the pageContent div with the content returned by the link without flashing the screen.
I have Large.html, which is a web page that has a lot of images and javascript on it which takes a long time to load.
From other pages (a.html, b.html) how can I use JavaScript to prefetch Large.html (and all of the elements on the page) so that I can get the page cached in the users browser to help speed up page loading.
Would I need to use a hidden IFRAME?
You could just load the body of the page, put it into the innerHTML of a div that has 'display: none', and wait for a bit, then make the current div have a display of none and the div with the new page becomes visible.
It may still need to go out and actually download the images, but it should basically be preloaded.
yes, i would use a Hidden Iframe. That will, in general, take care of exercising scripts that might run and load in additional assets on that slow-to-load page.
If you do this, be sure to do it after the load of the a.html page so that you are not stopping the user interacting on this page.
I say if, because you often don't know for sure that the user will load the Large.html page.
Other than that if the large parts of the other page are mostly images, I would load them, and not the entire page (html, css, js, & images) in an iframe.
I've seen too many sites that try to load the entire content (hidden) in an iframe... and in the process make the current page unusable. :-(