I use jQuery fullPage on my website, and everything looks just fine. The problem I'm having is that all images are loaded at "same time" making the website's load to be around 23Mb!!!
I tried reading fullPage's documentation, but couldn't make images load like "lazy load" or something.
All of them are loaded as a background:
<div class="slide" id="slide2" style="background-image:url(produtos/002.jpg)">
</div>
Do you have any clue so I can load images as needed and not all at the same time?
Things are easier :)
Just use conditional CSS based on the class fullpage.js adds to your body element. (fp-viewing-section-slide). If you need more information about it you can check this video where it is explained with more detail.
For example:
.fp-viewing-secondPage-0 #slide2{
background-image:url(produtos/002.jpg)
}
.fp-viewing-3rdPage .section{
background-image:url(produtos/1.jpg)
}
This way the background image will only be loaded when the section enters in the viewport.
Another way of doing it is by using the active class added to the section or slide you are in:
#slide2.active{
background-image:url(produtos/002.jpg)
}
.section.active{
background-image:url(produtos/1.jpg)
}
Or you can even decide to preload the backgruonds of all the slides within a section when arriving to the section itself (rather than to the specific slide) by doing this:
.section.active #slide2{
background-image:url(produtos/2.jpg)
}
.section.active #slide3{
background-image:url(produtos/3.jpg)
}
.section.active #slide4{
background-image:url(produtos/4.jpg)
}
Update
You can create an asynchronous function which preloads images while the rest of your script continues to run.
Example with background images:
<body>
<div class="container">
<div class="slide" id="slide1"></div>
<div class="slide" id="slide2"></div>
<div class="slide" id="slide3"></div>
<div class="slide" id="slide4"></div>
<div class="slide" id="slide5"></div>
<div class="slide" id="slide6"></div>
</div>
</body>
<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<script>
console.log('Creating images.'); // Will log first
setTimeout(function() {
createImages();
console.log('Image load complete.'); // Will log last
}, 0);
function createImages() {
var n = $('.slide').length;
for (var i = 1; i <= n; i++) {
$('#slide'+i).css('background-image', 'url(produtos/00'+i+'.jpg');
}
}
console.log('Continuing script.'); // Will log second
</script>
jQuery's setTimeout(), when set to 0 milliseconds, will emulate an asynchronous function that will run parallel to the rest of your script. This way your page will load immediately and then load images as they're ready. The above example assumes you've named your files in order starting at 001.
I hope this helps.
jqueryjavascriptasyncdom
Related
The following script is the most common I found to be used for managing the preloader but does this actually work or is it just some stuff we display for few seconds and assume the content of the site would have been loaded by then?
Here is that script.
$(document).ready(function() {
$(window).on('load', function() {
$('.loader').fadeOut(); // will first fade out the loading animation
$('.preloader').delay(1000).fadeOut('slow'); // will fade out the white DIV that covers the website.
$('body').delay(1500).css({'overflow':'visible'});
});
});
and then the HTML
<body>
<div class="preloader">
<div class="loader"> .... </div>
</div>
<div class="content">...</div>
Another thing i would like to ask is if we can have a simple preloader that actually works with just JavaScript instead of jQuery.... there seems to be some problem displayed in console when using the latest version of jQuery
Thanks in advance
I'm running an asynchronous 3rd party script that loads an image gallery into my page, but unfortunately their code doesn't provide me with a callback after their image gallery has finished loading.
The modal starts off like this:
<div class="modal-body">
<div class="container-fluid" id="cincopa">
</div>
</div>
After the gallery is loaded, the modal looks like this:
<div class="modal-body">
<div class="container-fluid" id="cincopa">
<div id="ze_galleria">
//gallery stuff
</div>
</div>
</div>
So I need some way to display a loading animation until #ze_galleria appears. The loading animation function I can do myself, but is there something in jQuery that will listen for when a certain DOM element is created? Once the DOM element appears, it'll run the callback to remove the animation.
Based on how that script adds the gallery/gallery items you could use the DOMSubtreeModified event and then check if that particular item were added
document.addEventListener("DOMSubtreeModified", function(e) {
if (document.querySelector("#ze_galleria")) {
// exists
}
});
Here is a DOM tree event list, where you can check other possible events that might could be used.
https://developer.mozilla.org/en-US/docs/Web/Events
Update
Make sure you take a look at the MutationObserver as well, as it has very good browser support nowadays.
https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
Also, you can set an interval:
var cincopa = $('#cincopa');
var counter = 0;
var intervalCode = setInterval(function(){
if (cincopa.find('#ze_galleria').length){
clearInterval(intervalCode);
yourCallback();
}
counter++;
console.log(counter + ' seconds past till the event loaded.');
}, 1000);
I think the code is intuitive, but if there is any doubt, just ask :)
Presuming that your "3rd party library" is going to totally overwrite the contents of what ever you point it at (as your example code suggests it does). You can solve your problem simply by adding an img:
<div class="modal-body">
<div class="container-fluid" id="cincopa">
<img src="loading.gif"/>
</div>
</div>
When the library has done what it needs to do it will overwrite the contents of the div <div class="container-fluid" id="cincopa"> resulting in:
<div class="modal-body">
<div class="container-fluid" id="cincopa">
<div id="ze_galleria">
//gallery stuff
</div>
</div>
</div>
thus removing your loading image.
I am trying to create two divs with a rotating image in on my webpage, these change to another image after a certain amount of seconds and there are 3 images to display. At the moment I am just trying to get the mechanics of this working using the code below, but although its simple I can not get it working. the code is the same as what I have used before however this time it does not want to work. I did it last, years agao, and I have completely forgotten how and research has not helped.
My code is below. In case this problem is site specific I have also included a livelink HERE which I shall remove once the question is answered. THE TWO DIVS ARE THE RED AND YELLOW BOXES.
JAVASCRIPT
var rotators = [
{ id: 'advert1', images: ['http://www.w3schools.com/html/html5.gif', 'http://www.w3schools.com/html/pic_mountain.jpg', 'http://www.w3schools.com/html/pic_graph.png'], selectedIndex: 0 },
{ id: 'advert2', images: ['http://www.w3schools.com/css/klematis_big.jpg', 'http://www.w3schools.com/css/klematis2_big.jpg', 'http://www.w3schools.com/css/klematis3_big.jpg'], selectedIndex: 0 }
];
var updateImages = function() {
for (var i=0; i < rotators.length; i++) {
var rotator = rotators[i];
rotator.selectedIndex++;
if (rotator.selectedIndex >= rotator.images.length) {
rotator.selectedIndex = 0;
}
document.getElementById(rotator.id).src = rotator.images[rotator.selectedIndex];
}
};
var timer = setInterval(updateImages, 1000);
</script>
HTML
<div id="main">
<div id="advert1"></div>
<div id="advert2"></div>
</div>
You are trying to set the div src. you need to have an image (img) element inside each div and then to set the image src.
<div id="main">
<div>
<img id="advert1" alt="" src.../>
</div>
<div>
<img id="advert2" alt="" src.../>
</div>
</div>
Another option will be to set the div background image using the style property or class property (both using CSS sets with JavaScript).
The javascript is executed where you write, if you write before element then the element does not exist.
You can attach code to onReady event of document or puts code after element.
Looking at your code in Google Chrome, I see the following error in the console :
Uncaught ReferenceError: $ is not defined | new.html:204
It seems like you forgot to include the jQuery in your html page.
You can get it from a CDN on the following page: http://code.jquery.com/
Another problem is that you're trying to update an img but your DOM element is a div.
You should replace the following code:
<div id="main">
<div id="advert1"></div>
<div id="advert2"></div>
</div>
With:
<div id="main">
<img src="" id="advert1" />
<img src="" id="advert2" />
</div>
I am currently using the below code to load the jQuery masonry after all the images have loaded. It works great and as it should. However, if I am loading a large number of images it takes some time to show the masonry. I have tried multiple method to display a sort of loading image to show that the page is actually loading and is not just stagnant with no success. If anyone could please point me in the proper direction as to how to maybe use an if statement to check if the images are loaded. While they are not I would like to display the loading gif. Once they do load I would like to have the masonry appear.
var $container = $('#freewall').imagesLoaded( function() {
$container.isotope({
});
});
Sorry to over complicate a simple issue. But I greatly appreciate any help that I can get!
I would recommend to show each image individually as soon as it loads, instead of waiting for the complete set of images
in other words, your HTML would be something like this:
<div class="grid">
<div class="item"> <img src="test.jpg"> </div>
<div class="item"> <img src="test.jpg"> </div>
<div class="item"> <img src="test.jpg"> </div>
<div class="item"> <img src="test.jpg"> </div>
</div>
then with CSS hide your images, with something like this:
.item img {
display: none;
}
next initialize the grid with isotope:
$('.grid').isotope({
itemSelector: '.item',
percentPosition: true,
});
and finally show the images that are getting loaded individually with the help of imagesLoaded, like this:
$('.grid').imagesLoadedMB().progress( function(instance, imageObj) {
$(imageObj.img).fadeIn(300);
$('.grid').isotope('layout');
});
I personally I would prefer to use a plugin ready to use, like this one: https://codecanyon.net/item/media-boxes-portfolio-responsive-grid/5683020 which already deals with all of this for me
I am using .load() in jQuery to load in html content, but in this content there are 3/4 images embedded. The success event only fires on .load() when all the html is loaded in and not actually the images, does anyone know a way of preloading the full content of a page?
$('#ajax_loader').hide().load('page.html',function(){
$(this).fadeUp(1000);
});
This is my simple code (rest of it is in the full app), loading in the following code (ie. page.html)
<div>
<div id="slideshow">
<img src="images/img1.jpg" />
<img src="images/img2.jpg" />
<img src="images/img3.jpg" />
</div>
<p>This is some sample content</p>
</div>
I suggest that you don't use a fadeIn animation after the images are loaded because of performance degradation it brings. It is usually a good idea to fadeIn the content then start loading the images to ensure that the animation is smooth for as many users as possible.
Having said that, of course you can accomplish your original goal if you want to stick with it:
Use a 1x1 blank image as the image src attribute and store the real url in the title.
<div>
<div id="slideshow">
<img src="blank.gif" title="images/img1.jpg" />
<img src="blank.gif" title="images/img2.jpg" />
<img src="blank.gif" title="images/img3.jpg" />
</div>
<p>This is some sample content</p>
</div>
And your code becomes:
$('#ajax_loader').hide().load('page.html', function(){
var c = 0;
var images = $("#slideshow img");
images.load(function(){
if (++c == images.length) {
$('#ajax_loader').fadeIn(1000);
}
});
images.each(function(){
this.src = this.title;
});
});
The images are loaded with separate HTML requests, and obviously the browser can't even start loading them until the HTML in the response has been parsed.
If you know the URLs of the images before you load the content, then you can preload them by creating "Image" elements and waiting for them to load (that is, by handling their "load" events individually).
var imgUrls = [ "images/img1.jpg", "images/img2.jpg", "images/img3.jpg" ];
var c = 0;
for (var i = 0; i < imgUrls.length; ++i) {
var img = new Image();
img.onload = function() {
c += 1;
if (c == imgUrls.length) {
// at this point all images are loaded
// ...
}
};
img.src = imgUrls[i];
}
edit — #galambalazs pointed out that the closure around the handler was (in this case) unnecessary.
Check out this similar situation
It seems that the main fix to your problem would be the correct use of the .ready and the .load operator. If used properly, you can wait until all elements and media items are loaded into the browser before a response is passed to its handler. I don't want to plagerize too much :) and its a really great answer.