How do you preload images into the Orbit slider? - javascript

The issues is that the slider is not displaying properly when a user first visits the site. In testing the slider worked fine.
Or actually there was problem that it would not load when first visiting the page, but would then show up when (and only when) you refresh the page. But otherwise the slider shows up but not the images
I looked at the documentation from Zurb at Zurbs documentation for the Orbit slider and they have a sample file, That original demo file has a link above the images (which I removed)
I then searched more on Google using the phrase about this topic using the keyword "orbit preload images" and found a One solution with a preload function. Below is the code that I used to preload (I only modified the path to the images)
<script language="javascript">
function preload(arrayOfImages) {
$(arrayOfImages).each(function(){
$('<img/>')[0].src = this;
});
}
preload([
'../images/products/mill/slider/dentist.jpg',
'../images/products/mill/slider/side.jpg',
'../images/products/mill/slider/before.jpg',
'../images/products/mill/slider/after.jpg',
'../images/products/mill/slider/radio.jpg'
]);
</script>
I went ahead and added script but it is still not loading. The complete code for that page is viewable in a Gist on GitHub
The code for the setup of the image slider is viewable in a Gist on GitHub
The site is hosted on a server that is in a .net environment that does not support php.

I had the same issue and after some research, found the answer that works for me;
Basically, you can use jquery to hide the slider whilst it's loading.
See also, this link for further info: how to show div #loading whilst div #content loads
Looking at your code, this should work (untested)
In the <head> section, add this;
<script type="text/javascript">
jQuery(document).ready(function() {
// hide orbit slider on load when user browses to page
$('#featured.orbit').hide(); // hide div, may need to change id to match yours
$('.loading').show(); // show the loading gif instead
// then when the window has fully loaded
$(window).bind('load', function() {
$('.loading').hide(); // hide loading gif
$('#featured.orbit').fadeIn('slow'); // show orbit
});
});
</script>
In your html page that contains the orbit slider code (content copied from your page)
<!-- =======================================
ORBIT SLIDER CONTENT
======================================= -->
<div style="width:100%;">
<div style=" max-width:480px; margin: 0px auto;">
<div id="featured" >
<!-- your content etc..... -->
<span class="orbit-caption" id="radioCaption">Radiograph shows crown seated with
excellent marginal integrity</span>
</div>
</div>
<?php //
// load the loading image - you need to add one to your image directory
// see here to generate one: http://www.ajaxload.info/ ?>
<div class="loading">
<img src="http://www.yourdomain.com/path/to/folder/loading.gif"/>
</div>
</div> <!-- end twelve columns-->
In your CSS you need to hide the #featured div
#featured { display: none; background: #f4f4f4; height: 600px;}
#featured img { display: none; }
#featured.orbit { background: none; }
.loading {margin: 0 auto;text-align:center;margin:30px; }
Hope that helps!

Related

SlidesJS for JavaScript Disabled User

I am pretty new to JavaScript.
I am using SlidesJS, which works perfectly fine.
However, when dealing with JavaScript disabled users, it is kind of tricky. For JavaScript disabled users, the images will be lined up. And I don't know how to deal with it because the images are embedded in the HTML code.
<div id="slides">
<img src="http://placehold.it/940x528">
<img src="http://placehold.it/940x528">
</div>
<script>
$(function(){
$("#slides").slidesjs({
......
</script>
Is there a way to use SlidesJS still, but for JavaScript disabled user, the webpage shows one default image, and hides all the other images?
Use CSS and Modernizr, which can add a class to the HTML element if and only if JavaScript is enabled.
#slides > img + img {
display: none; // may need to make this !important
}
.js #slides > img + img {
display: block;
}
(Note that modernizr.js should be run before any other JS on the page.)
If all you want is JavaScript detection, you don't even need Modernizr -- just one line of code and the above CSS:
document.getElementsByTagName("html")[0].className = "js";
or, to be non-destructive about it:
document.getElementsByTagName("html")[0].className
= document.getElementsByTagName("html")[0].className + " js";

Optimize the loading of my Tumblr with JavaScript to customize styles

--
Hi !
Reader, if you are not comfortable with Tumblr, please tell me, I will give more details!
I had some issues on my tumblr page with the default theme 'Optica'. When I post an embed SoundCloud track, here is what I get on the page:
photo below
NOTE: I have tried to change the theme, and I discovered that for some of them, everything goes fine, but there are a few others with the same bug
So I've tried to fix that, and I've located the origin of the bug in the styles sheet main.css:
.video .video-wrapper {
background: #111;
position: relative;
padding-bottom: 56%;
height: 0;
}
The thing is, that to publish an embed code, you have to do it through the "Video post" tool on your tumblr dashboard, which then allows to style the embed code with the .video-wrapper
Of course, what I want to do here is reducing the bottom padding, but if I do it that way, it will affect all "Video posts". So I used the existing class .soundcloud_audio_player in the iframe to "mark" this type of Video posts to be able to change the styling only of these Video posts.
I have simplified it, and here is what it looks like at the end in browser:
<article class="audio not-page post-70801339374 " data-post-id="post_70801339374">
<div class="post-wrapper clearfix">
<section class="post">
<figure>
<div class="video-wrapper">
<iframe class="soundcloud_audio_player" />
</div>
</figure>
<section class="attribution-tags clearfix">
<ul>
<li>
SoundCloud
</li>
<li>
Blutch
</li>
</ul>
</section>
</section>
<section class="panel" />
</div>
<article>
And now, what I have put between tags in my Tumblr customized HTML:
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.3");
google.setOnLoadCallback(function() {
jQuery(function($) {
$("iframe.soundcloud_audio_player").parents('div.video-wrapper').css("padding-bottom", "17%");
});
});
</script>
I used jQuery because I didn't know anything about JavaScript or jQuery before today, and I thought it what simpler! But maybe I'm wrong. Anyway, PROBLEM #1 FIXED!
NOW, PROBLEM #2
When the page is loading, the former styling (before than JS intervene) appears for 1 or 2 sec (with my bandwidth anyway!) and it's quite ugly:
photo below
I've looked a bit here
http://www.memodev.com/wiki/Optimiser_un_site_Web
and here
https://developers.google.com/speed/docs/best-practices/rules_intro?hl=fr-FR
But I can't find how to improve the loading, and I hope some of you guys can :)
PageSpeed test below
It sounds like you just want to hide the fact that styles are changing after the page loads -
So, this will do the trick very basically :
Add this to your HTML:
<div id="screen"></div>
Add this to your CSS :
div#screen {
position:fixed;
height:100%; width:100%;
background:white;
z-index:999;
}
You might not need the z-index
There are lots of loaders you can use in place of this, if you would like -
and then,
In JQuery:
$(document).ready(function(){
// Here, you insert that code that adds the padding to your iframe, and whatever else
// you need to do to prepare the page...
$("#screen").hide(); // this will display your page - !
});

How do I check if a window is still loading and also finished loading?

I am creating a functionality where a user presses a button (Print Timetable) and then a popup window appears with a page showing their timetable and then the printing options automatically appear. However, when the popup is still loading the timetable I want to display an animated GIF. The timetable in the popup isn't fetched with AJAX so I can't use ajax start and stop so how would I do this then?
<input type="button" value="Print Timetable" class="printButton" onclick="window.open(url, ' _parent','height=550, width=800');"/>
This is what is happening so far in the timetable popup:
<div id="animated-logo" class="animated-logo">
Test
</div>
<script type="text/javascript">
$('.animated-logo').addClass('logo');
$('.animated-logo').removeClass('animated-logo');
if (window.print){ self.print();}
</script>
Obviously, that animated gif isn't going to work but it's a start.
Any help would be great. Thanks!
Have a look at jQuery's load() over here.
HTML
<div id="" class="itm-animated-logo">
Test
<div id="time-table">...</div>
</div>
jQuery
$("#time-table").load(function() {
$(this).parent().removeClass("itm-animated-logo");
}
CSS
.itm-animated-logo {background-image: loading.gif;}
So when the pop-up is loaded (with class itm-animated-logo), its background will be the loading.gif file. As soon as your time table is loaded (#time-table) the class of the pop-up will be removed and the background, subsequently, as well.
The downside of this may be that parts of the time table will get loaded (so the time table gets loaded in chunks) in which case they will be 'on top of' the background-image. To fix this you can make an extra div. Maybe this solution is even better:
HTML
<div id="" class="itm-animated-logo">
<div id="loading"><img src="loading.gif" alt="Loading your time table" height="32" width="32" /></div>
Test
<div id="time-table">...</div>
</div>
jQuery
$("#time-table").load(function() {
$(this).parent().children("#loading").fadeOut("slow");
}
CSS
#loading {
display: block;
width: 32px;
height: 32px;
margin: 50px auto;
padding: 0;
}

Hiding page loading

My HTML markup looks like that
<html>
<body>
<div id="loading"><img src="core/design/img/load/load.gif" /></div>
<div id="wrap"></div>
<div id="footer"></div>
</body>
</html>
I'm trying to hide whole page loading process with following solution.
CSS Rules:
#loading {
position:fixed;
left:0;
top:0;
width:100%;
height:100%;
background-image:url("img/load/tr.png");
z-index:100;
}
#loading img {position: absolute; margin-left:-110px; margin-top:-9px; left:50%; top:50%}
And Jquery
$(document).ready(function(){
$('#loading').fadeOut(500);
});
Now, the problem is page loads like that:
first ugly draft of page (for 1-2 seconds)
appears loading div
loading whole content
disappears loading div
You can see it in action
I don't understand why loading div appears after 1-2 seconds?
I want to prevent 1).
I think this is a pretty simple one.
First make sure jQuery is called in your section.
First, wrap all the content of your page (except the loading div) in a div called
<div id="content-wrapper">
CONTENT HERE
</div>
Then using CSS set:
#content-wrapper {
visibility:hidden;
}
Then just make the jQuery into a function like this:
$(window).load(function(){
document.getElementById("content-wrapper").style.visibility="hidden";
$('#loading').fadeOut(500, function()
{
document.getElementById("content-wrapper").style.visibility="visible";
});
});
and I can see you're using Nivo Slider. Me too ;)
Edit: I fixed it, now it works perfectly. (You don't need the onload event in your body tag anymore)
Check out the example here: JSFiddle
Try moving the styles for loading to be inline instead of relying on the full external css file to load. If you look at Google Chrome Developer Tools and the Network tab, or a similar tool, you'll see the content of the page loads first, as expected, but then you have to wait until the external css is loaded and downloaded, and then the referenced image in the css file is loaded. Placing the style inline should assist in getting the loading element to display as soon as it can, or at least sooner.
<div id="loading" style="position: fixed;left: 0;top: 0;
width: 100%;height: 100%;background-image: url(core/design/img/load/tr.png);z-index: 100;"><img src="core/design/img/load/load.gif"></div>
Why not start everything else inside a <div style="display: none;" id="loaded">, and then when the loading has finished use $("#loaded").fadeIn()?

Load in external .html file with jQuery

I'm trying to create a website with tabbed browsing and have followed a tutorial to make this. But the problem is that the code I'm currently is using doesent work as expected.
HTML-code:
http://pastebin.com/CG146NS3
CSS-code: http://pastebin.com/4VCuAwJm
JavaScript: http://pastebin.com/sZhhQs6v
The tutorial I followed: http://net.tutsplus.com/tutorials/javascript-ajax/how-to-load-in-and-animate-content-with-jquery/
The problem:
When I click one of the tabs the #content goes away with a slideUp and .load loads the content but it doesent place the content in #content.
You have some duplicate #ids.
Remember when you do:
var toLoad = $(this).attr('href')+' #content';
// other execution
function loadContent() {
$('#content').load(toLoad,function(){
$('#content').slideDown('normal');
});
you are actually loading a page fragment #content into #content in your page. So you end up with this:
<div id='content'>
<div id='content'>Random Data</div>
</div>
Okay, based on your comment..Just make sure that you actually have a DIv with ID #content in your random html files.

Categories