I'm using jQuery 1.6 and the Slides plugin (slidesjs.com)
The slides have this format: <a><img></a>
The image of the first slide takes up to 6 seconds to load.
From the Chrome network panel I know that the image is being loaded twice, and one of the loads is what is taking so long.
The code that creates the slideshow is:
$('.rotator').slides({
preload: true,
play: 7000,
pause: 2500,
hoverPause: true
});
In the screenshot you'll see a reference to jquery-1.6.js # line 2206, which is:
attr: function( elem, name, value, pass ) {
...
elem.setAttribute( name, "" + value ); // <-- line 2206
Chrome's network information:
Any ideas of what is happening and how can avoid this?
I would be interested in seeing a link to what you've built already. There's so many things that could be looked at for optimization such as:
Many HTTP requests
Image size
Amount, size, and position of external scripts on page
etc
If there's only a few images being displayed on page load you should make sure the other images don't try to download until the page is fully loaded, as you will be stealing available resources from higher priority elements.
Related
In this website that I am building https://vase.ai/blog/ , I am using a script of infinite scrolling to make several pages into one page for scrolling.
I would like to hide the loader(the spinning one) when there is no more page to be loaded. I figured that the following code might be able to help me to detect the error (Failed to load resource: the server responded with a status of 404 (Not Found)) and execute the hiding. However, it does not work. Am I missing something out?
window.addEventListener('error', function(e) {
$('loading').fadeOut()
}, true);
Code that I use to to load more :
//implementing infinite scrolling
$grid.infinitescroll({
// Pagination element that will be hidden
navSelector: '.pagination',
// Next page link
nextSelector: '.pagination a',
// Selector of items to retrieve
itemSelector: '.grid-blog',
},
// Function called once the elements are retrieved
function(new_elts) {
var elts = $(new_elts).css('opacity', 0);
elts.animate({opacity: 1});
$grid.packery('appended', elts);
$('.target-resize').textfill({
maxFontPixels: 36,
changeLineHeight:false
})
$grid.packery({
itemSelector: '.grid-blog',
gutter: 20,
})
});
It's difficult to answer your question without the code that make the http calls in order to load your content. But,
1) you may have an error, and still have contents to be loaded, in that case your loader will disappear even if contents are still loading.
2) You should have something that tel your site what you have to load.
an array of url, or anything, you can maybe use this to hide your loader when all contents has been loaded.
3) You should have somewhere a function that make httpcalls to get your content. This function should have a callback. In this callback, you should be able to catch an error, and then hide your loader.
I cannot give you more informations with the amount of code you show in your exemple.
edit : after looking at your code, you may try to do :
// Function called once the elements are retrieved
function(new_elts) {
if(!new_elts) {
$('loading').fadeOut();
return;
}
...
}
I don't think this is the right solution, your plugin should have a built-in function to stop calling new pages, but since I don't see the function that make the http call, or any array/iterator of URLs, it's difficult top help you.
you should check this demo to : https://codepen.io/desandro/pen/rwwoGe
What I want is to show loading animation while image is loading.
Basically I have large system and all code bits are injected using ngInclude.
So if I have to construct the bit I'm interested in it would look like:
<div ng-controller="MyTabCtrl">
<div id="preview-panel" waiting-animation="img/loading.gif" waiting-property="isLoadingPreview">
<ng-include src="htmlInclude" />
</div>
</div>
And htmlInclude html for example would just be a div with img.
The htmlInclude changes when I click different posts I have.
So far I loaded low quality images so loading wasn't an issue - it was quick. Now I want to load high-quality images and their loading takes a while.
So all my included html (text, buttons etc) is loaded, and the image gets replaced after a few moments.
I tried to fiddle with different events I found in other questions, but they don't seem to be working for me. Either the loading doesn't appear at all, or it appears and stays there even after loading is complete.
Some stuff I tried is:
$scope.$on('$includeContentLoaded', function () {
$scope.isLoadingPreview = false ;
});
or
$scope.$on('$viewContentLoaded', function() {
$scope.isLoadingPreview = false ;
});
How can I make this happen?
Thanks!
I have a photo gallery powered by Isotope.Images are requested from external resource on page load and every time a user scrolls to the bottom of the page. New images are to be appended to the current isotope layout. The problem is with Isotope - it doesn't seem to execute the 'appended' method.
Searching for a solution on StackExchange and Google revealed I am not the only one having this problem. I have been tinkering with this for past couple of days and tried almost every solution I could find but so far I have not found anything that could fix my problem.
CodePen: I have created a CodePen here - http://codepen.io/Writech/pen/pBoEt
WebPage: As the custom event 'resizestop' is not working in codepen the same code is found as a webpage here - http://writech.net.ee/sandbox/
To see the problem open the CodePen or WebPage provided above and scroll to the bottom of the page which initiates loading of additional images. Then you see the new images are just appended to the container by jQuery. But they are not appended to the isotope layout instance as they are supposed to.
The problematic part lays in a custom function named isotopeAppend(). This function is called on page load and then the second part of 'if-else' statement is executed. When initialization is done and first images are added to the container then the next time isotopeAppend() is called (it's when user reaches to the bottom of the page) the first part of 'if-else' statement is executed and this is where the problematic Isotope 'appended' method is called.
A code snippet below from problematic javascript code. The results of the ajax request to external resource are applied to the variable newElems. When adding an alert('something') or console.log inside the 'appended' callback - nothing happens.
Does the problem lay in Isotope itself or does it have anything to do with my coding error?
I would really like to find a solution for this!
var elements = $(newElems).css({ opacity: 1, 'width' : columnWidthVar + 'px' });
$('#photos_section_container').append( elements );
$('#photos_section_container').imagesLoaded(function(){
$('#photos_section_container').isotope( 'appended', elements, function(){
hideLoader(function(){
elements.animate({ opacity: 1 });
});
});
});
In the initialization change
itemSelector : $('.photos_section_wrap'),
to
itemSelector : '.photos_section_wrap',
I forked your pen.
itemSelector is used by isotope to filter elements to layout and $() returns array of objects. In result there no elements to layout. If you are interested you may look at the _getAtoms method (isotope script) in debug to see what's goinig on.
I'm a little new to javascript as I mostly just fool around with CSS styling when developing web pages.
I ran into a problem trying to integrate Fancybox with Cloudzoom. I've been trying to follow the directions as directed here: http://blog.codestars.eu/2010/cloud-zoom-in-der-fancybox/
I'm able to get the effect to work perfectly except for one small error-- for some reason (all my images are in galleries for easier use scrolling through fancybox), the zoom only ever shows the first image in the series.
If someone could help me sort through this? Preview any of the galleries here: http://bit.ly/LaPzEH
Here's the tidbit I think is just slightly off - I think it has something to do with the href line in this code being off:
$j('a[rel=gallery]').fancybox({
padding: 0,
overlayColor: '#'+$j('#skin_color').val(),
transitionIn: 'fade',
transitionOut: 'fade',
overlayOpacity: .9,
onComplete : function(arg) {
$('#fancybox-img').wrap(
$('<a>')
.attr('href', $(arg[0]).attr('href'))
.addClass('cloud-zoom')
.attr('rel', "position: 'inside'")
);
$('.cloud-zoom').CloudZoom();
}
});
Any an all help is greatly appreciated!
Edit: Got it working by changing
$(arg[0]).attr('href')
to
this.href
As an aside (because I couldn't find many cloudzoom/fancybox threads) you can also change the position from inside to right/left etc. by editing the JS code for fancybox to have the fancybox-inner display as visible rather than hidden.
If the idea is to wrap the #fancybox-img selector with an anchor with class="cloud-zoom" and with the same href attribute of the anchor that opened fancybox like
<a href="{same as anchor}" class="cloud-zoom" rel="position: 'inside'">
<img id="fancybox-img" src="{big image}" alt=" " />
</a>
... so Cloud Zoom can work on the specific image, then I would re-write the onComplete callback like :
'onComplete' : function(){
$('#fancybox-img').wrap(
$('<a />')
.attr('href', this.href) // this.href gets the "href" of the current image
.addClass('cloud-zoom')
.attr('rel', "position: 'inside'")
); // wrap
$('.cloud-zoom').CloudZoom();
} // onComplete
(not idea what the heck onComplete : function(arg) would do but in any case it would be better to use 'onComplete' : function(currentArray, currentIndex) for the sake of standard fancybox code)
SIDE NOTES:
You are loading two versions of jQuery (1.4.2 and 1.7.1) when you actually need a single instance (ideally the latest version) to avoid unexpected errors.
You are using fancybox v1.3.0 ... it wouldn't hurt to upgrade at least to v1.3.4
Set all your fancybox API options between quotes like
"padding": 0, // it's OK 0 without quotes (integer and Boolean values go without them)
"overlayColor": '#'+$j('#skin_color').val(),
"transitionIn": 'fade',
"transitionOut": 'fade',
"overlayOpacity": .9,
"onComplete": ...etc
there are known issues (mostly with IE) because that (fancybox v1.3.x)
I'm using jquerynewsticker to reveal 100,000 digits of the number π in a news ticker fashion.
If i have my Chrome inspector open, i can see that the page loads from top to bottom, but the after the number, as well all the JS behind it, is rendered black for a few seconds, and only then becomes coloured as per default. However, the script already starts running as you can see on the test page here: http://marckremers.com/pi/ticker/
It seems to run, but without rendering.
If i reduce the size of the number, it works.
So it's clearly an issue where the loading isnt complete.
How can I force the script to only play once everything has 100% loaded?
Looking at your website I see the you load the ticker plugin and you execute your own code:
jQuery(document).ready(function($) {
$(function () {
$('#js-news').ticker({
speed: 0.05,
fadeInSpeed: 0,
titleText: '',
controls: false,
});
});
});
There 2 issues in this code:
1) Unnecessary nesting. you execute your code on document ready and then you call again a document ready handler ($(function(){...});
Keep in mind that writing $(document).ready( function(){} ) or $(function(){}) serves exactly the same purpose. For this reason you can remove the second event listener (useless):
jQuery(document).ready(function($) {
$('#js-news').ticker({
speed: 0.05,
fadeInSpeed: 0,
titleText: '',
controls: false,
});
});
with document.ready registration your code will run after the DOM has been completely built.
2) Another issue I see is that your selector #js-news does not resolve! I see no element in the page with ID=js-news... am I missing something ?
You can put your code as above to wait for the dom to be fully loaded.
$(function() {
// Your code
});
If it's not enough, if you want to wait for everything to be loaded (images, css, ...), you can put your code as above :
$(function()
{
$(window).bind('load', function()
{
// Your code
});
});