I'm appending a large image when it's done loading and fading it in which all works well. My problem is when there is more than one image. Then it's only the last small image that get replaced (with the first image). I can't seem to figure out how to separate them. The src URLs are retrieved trough a data-attribute. Codepen with two images. (with one image it works as intended).
window.onload = function() {
var ImageBlur = function (element) {
var self = this;
this.element = element;
this.$element = $(element);
};
var placeholder = $('.js-image-blur', this.$element);
var small = $('.js-small-image', placeholder);
// Load large image
var imgLarge = new Image();
imgLarge.src = placeholder.data('largeimage');
imgLarge.className = "is-large-image";
imgLarge.onload = function () {
$(imgLarge).addClass('is-loaded');
// Remove small image
setTimeout(function(){
$(small).remove();
}, 1200);
};
$(imgLarge).each(function() {
placeholder.append(this);
});
return ImageBlur;
};
I would rewrite the code like that:
$(function() {
$(".js-image-blur").each(function() {
var $this = $(this);
var $smallImage = $(".js-small-image", $this);
var $largeImage = $("<img>").attr({
src: $this.data("largeimage"),
class: "is-large-image"
}).load(function() {
$(this).addClass("is-loaded");
setTimeout(function() {
$smallImage.remove();
}, 1200);
});
$this.append($largeImage);
});
});
.image-blur {
background-color: transparent;
background-size: cover;
background-repeat: no-repeat;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
}
.image-blur img {
position: absolute;
top: 50%;
left: 50%;
min-height: 100%;
width: auto;
min-width: 100%;
transition: opacity 1s linear;
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.image-blur img.small-image {
-webkit-filter: blur(20px);
filter: blur(20px);
position: absolute;
}
.image-blur img.is-large-image {
opacity: 0;
}
.image-blur img.is-loaded {
opacity: 1;
}
body {
margin: 3em 0;
background: silver;
}
.container {
position: relative;
margin: 3em auto;
min-width: 320px;
min-height: 560px;
border-top: 3px solid black;
border-bottom: 3px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="container">
<div class="image-blur js-image-blur" data-component="image-blur" data-largeimage="https://s3-us-west-2.amazonaws.com/s.cdpn.io/67710/1600-full.jpg">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/67710/1600-small.jpg" alt="" class="small-image js-small-image" />
</div>
</section>
<section class="container">
<div class="image-blur js-image-blur" data-component="image-blur" data-largeimage="https://s3-us-west-2.amazonaws.com/s.cdpn.io/67710/1600-2-full.jpg">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/67710/1600-2-small.jpg" alt="" class="small-image js-small-image" />
</div>
</section>
See updated Codepen.
If you want to load images silently and fade them in, a simple solution would be:
<img class="load-fade" src="url" />
And in your JavaScript:
$('.load-fade').hide().load(function() {
$(this).fadeIn(1000);
});
Related
I've this code and it's not working. I know it would be some obvious typo or logical error but I am not able to find it. When I click at any nav-item, it doesn't change the background of body. I'm new to JS. Please help me with this -
let body = document.querySelector("body");
let navBack = document.getElementById("navbar");
let introNav = document.querySelector(".nav-item1");
let expNav = document.querySelector(".nav-item2");
let projectsNav = document.querySelector(".nav-item3");
let skillsNav = document.querySelector(".nav-item4");
let contactNav = document.querySelector(".nav-item5");
introNav.addEventListener("click", function() {
body.style.background = introNav.style.background;
navBack.style.background = introNav.style.background
})
expNav.addEventListener("click", function() {
body.style.background = expNav.style.background;
navBack.style.background = expNav.style.background
})
projectsNav.addEventListener("click", function() {
body.style.background = projectsNav.style.background;
navBack.style.background = projectsNav.style.background
})
skillsNav.addEventListener("click", function() {
body.style.background = skillsNav.style.background;
navBack.style.background = skillsNav.style.background
})
contactNav.addEventListener("click", function() {
body.style.background = contactNav.style.background;
navBack.style.background = contactNav.style.background
})
#navbar {
background: var(--introduction-color);
z-index: 1;
width: 800px;
height: 800px;
border-radius: 50%;
position: absolute;
clip-path: polygon(50% 50%, 0% 100%, 100% 100%);
transform: rotate(-45deg);
top: -400px;
left: -400px;
}
.nav-items {
width: 800px;
height: 800px;
background: #fff;
border-radius: 50%;
position: absolute;
z-index: 3;
cursor: pointer;
clip-path: polygon(50% 50%, 100% 50%, 100% 66%);
}
.nav-item1 {
background: var(--introduction-color);
transform: rotate(45deg);
}
.nav-item2 {
transform: rotate(63deg);
background: var(--experience-color);
}
.nav-item3 {
transform: rotate(81deg);
background: var(--projects-color);
}
.nav-item4 {
transform: rotate(99deg);
background: var(--skills-color);
}
.nav-item5 {
transform: rotate(117deg);
background: var(--contacts-color);
}
<div id="navbar">
<div class="nav-items nav-item1"></div>
<div class="nav-items nav-item2"></div>
<div class="nav-items nav-item3"></div>
<div class="nav-items nav-item4"></div>
<div class="nav-items nav-item5"></div>
</div>
Image - Image of the navbar
element.style can only access inline styles (those assigned via a style="..." attribute):
document
.querySelectorAll('.item')
.forEach(
item => console.log(item, 'style.color:', item.style.color)
);
<div class="item">Test</div>
<div class="item" style="color: red;">With inline style</div>
To access the currently applied value of color, you'll have to resort to window.getComputedStyle(element):
document
.querySelectorAll('.item')
.forEach(
item => console.log(item, getComputedStyle(item).color)
);
<div class="item">Test</div>
<div class="item" style="color: red;">With inline style</div>
put the script at the bottom of the page or use const introNav = document.getElementsByClassName("nav-item1");
Somehow I can't get the following script to run.
The idea is to swap background images of a div, once the links with its corresponding data attributes are hovered. To be clear, both the links and the background images are listed separately.
Can someone help me with the solution??
Ps: Codepen example over here: https://codepen.io/eric-schakel/pen/qBXvgoM
!(function (t) {
class Bo {
constructor(t) {
const e = $$$(".capabilities__list a"),
i = $$(".capabilities__list");
e.forEach((t) => {
t.addEventListener("mouseover", function () {
const e = t.getAttribute("data-capability");
$$(".background__images img:nth-of-type(" + e + ")").classList.add("active");
}),
t.addEventListener("mouseout", function () {
const e = t.getAttribute("data-capability"),
i = $$(".background__images img:nth-of-type(" + e + ")");
i && i.classList.remove("active");
}),
t.addEventListener("click", function () {
window.capability = this.getAttribute("data-capability");
}),
i.addEventListener("mouseover", function () {
$$("#home__capabilities img.fill-background").classList.add("hidden");
}),
i.addEventListener("mouseout", function () {
const t = $$("#home__capabilities img.fill-background");
t && t.classList.remove("hidden");
});
});
}
}
});
#home__capabilities {
width: 100vw;
height: 60vh;
display: flex;
align-items: center;
}
img.fill-background {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
}
img.fill-background.hidden {
opacity: 0;
}
.capabilities__list {
font-size: 50px;
z-index: 10;
}
.capabilities__list a:hover {
opacity: .5;
}
.background__images {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-size: cover;
z-index: 1;
}
.background__images img {
width: 100%;
height: 100%;
max-width: 100%;
object-fit: cover;
opacity: 0;
position: absolute;
top: 50%;
transform: translateY(-50%) translateZ(0) scale(1.01);
transform-origin: left center;
transition: opacity .2s ease-in-out,transform .4s ease;
}
.background__images img.active {
opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="home__capabilities">
<img class="fill-background" src="https://images.unsplash.com/photo-1428606381429-22224991fb0c">
<div class="capabilities__list">
Link 01
Link 02
Link 03
Link 04
</div>
<div class="background__images">
<img src="https://images.unsplash.com/photo-1427830574887-32e5702033b0">
<img src="https://images.unsplash.com/photo-1427830180740-12146c79a1a3">
<img src="https://images.unsplash.com/photo-1415226181422-279a51ca056e">
<img src="https://images.unsplash.com/photo-1450885413713-176921f199b2">
</div>
</section>
Here
I changed a few things I would love to delegate more, but that would change your code too much.
Syntax error - script should end on }) and not ])
Instantiation of class was missing
Variable names and constants were not understandable
Missing helper functions for querySelector and querySelectorAll
!(function() {
class Bo {
constructor() {
const $$ = selector => document.querySelector(selector),
$$$ = selector => document.querySelectorAll(selector),
links = $$$(".capabilities__list a"),
list = $$(".capabilities__list");
links.forEach(link => {
link.addEventListener("mouseover", function() {
const capability = link.getAttribute("data-capability");
$$(".background__images img:nth-of-type(" + capability + ")").classList.add("active");
}),
link.addEventListener("mouseout", function() {
const capability = link.getAttribute("data-capability"),
image = $$(".background__images img:nth-of-type(" + capability + ")");
image && image.classList.remove("active");
}),
link.addEventListener("click", function() {
window.capability = this.getAttribute("data-capability");
}),
list.addEventListener("mouseover", function() {
$$("#home__capabilities img.fill-background").classList.add("hidden");
}),
list.addEventListener("mouseout", function() {
const image = $$("#home__capabilities img.fill-background");
image && image.classList.remove("hidden");
});
});
}
}
const list = new Bo()
})();
#home__capabilities {
width: 100vw;
height: 60vh;
display: flex;
align-items: center;
}
img.fill-background {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
}
img.fill-background.hidden {
opacity: 0;
}
.capabilities__list {
font-size: 50px;
z-index: 10;
}
.capabilities__list a:hover {
opacity: .5;
}
.background__images {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-size: cover;
z-index: 1;
}
.background__images img {
width: 100%;
height: 100%;
max-width: 100%;
object-fit: cover;
opacity: 0;
position: absolute;
top: 50%;
transform: translateY(-50%) translateZ(0) scale(1.01);
transform-origin: left center;
transition: opacity .2s ease-in-out, transform .4s ease;
}
.background__images img.active {
opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="home__capabilities">
<img class="fill-background" src="https://images.unsplash.com/photo-1428606381429-22224991fb0c">
<div class="capabilities__list">
Link 01
Link 02
Link 03
Link 04
</div>
<div class="background__images">
<img src="https://images.unsplash.com/photo-1427830574887-32e5702033b0">
<img src="https://images.unsplash.com/photo-1427830180740-12146c79a1a3">
<img src="https://images.unsplash.com/photo-1415226181422-279a51ca056e">
<img src="https://images.unsplash.com/photo-1450885413713-176921f199b2">
</div>
</section>
I have two overlapped images, here an example:
This is the HTML:
<div class='image-wrapper drag-area fade1' id='cupcategory-productname-1' style='width: 300px; top: 50%; left: 50%'>
<div class='mydiv' id='drag-fronte'>
<div id='logo-container-fronte' class='mydivheader logo'>
<img id='cupcategory-productname-fronte' name='logo-container' style='width: 300px; top: 50%; left: 50%' src='../img/esempio_logo.png' onclick='saveImageWithLogo(this)'>
</div>
</div>
<div>
<img id='cupcategory-productname-fronte-fade' src='".$file."' alt='Candia Image' style='width:100%' class='image-one'>
</div>
</div>
This code is generated by PHP.
This is the CSS:
.image-wrapper {
/*position: relative;*/
z-index: 1;
/*cursor:pointer;*/
background-size:contain;
background-repeat:no-repeat;
display:inline-block;
/*width:200px;height:140px;*/
-webkit-transition: all 100ms ease-in;
-moz-transition: all 100ms ease-in;
transition: all 100ms ease-in;
-webkit-filter: brightness(1) grayscale(.5) opacity(1);
-moz-filter: brightness(1) grayscale(.5) opacity(1);
filter: brightness(1) grayscale(.5) opacity(1);
}
.image-wrapper .image-one {
/*border: 1px solid black;*/
/*position: relative;*/
width: 100%;
}
.image-wrapper .image-fronte {
/*width:151px;height:113px;*/
/*width: 15%; height: 15%;*/
/*width: 65px; height: 65px;*/
/*border: 1px solid black;*/
position: absolute;
top: 53%;
left: 50%;
transform: translate(-50%, 0);
}
.image-wrapper .logo {
/*width:151px;height:113px;*/
/*width: 15%; height: 15%;*/
/*width: 65px; height: 65px;*/
/*border: 1px solid black;*/
position: absolute;
top: 53%;
left: 50%;
transform: translate(-50%, 0);
}
.mydiv {
top: 50%;
left: 50%;
position: absolute;
z-index: 9;
text-align: center;
/*border: 1px solid #d3d3d3;*/
}
.mydivheader {
padding: 10px;
height: 100px;
width: 100px;
cursor: pointer;
z-index: 10;
/*border: 1px solid black;*/
}
And this is the JS:
function saveImageWithLogo(web_element)
{
var c=document.getElementById("myCanvas");
var image1 = web_element;
var image2 = document.getElementById(web_element.id + '-fade');
console.log(image2);
var ctx=c.getContext("2d");
var imageObj1 = new Image();
var imageObj2 = new Image();
imageObj1.src = image1.src;
imageObj1.onload = function() {
ctx.drawImage(imageObj1, 0, 0, 100, 100);
imageObj2.src = image2.src;
imageObj2.onload = function() {
ctx.drawImage(imageObj2, 0, 0, 300, 300);
var img = c.toDataURL("image/png");
image1.src = img;
//document.write('<img src="' + img + '" width="328" height="526"/>');
}
};
}
The image1 is the cup and it comes from my server, the image2 is the overlapped image that should be the logo of my user. Now, the scenario is this: The user sees the cup, upload his logo and wants to go ahead buying this cup with his logo. My problem is to show this Cup with logo on it in the recap page but I also need to save it on server because other reasons.
How can I do? I tryed with canvas drawing two images starting from coords 0, 0 but image2 cover the image1.
Edit
I've tried to do this:
var image_wrapper = document.getElementsByClassName('image-wrapper')[0];
console.log(image_wrapper);
html2canvas(image_wrapper, {
onrendered: function (canvas) {
console.log('saving...');
console.log(canvas);
var myImg = new Image();
myImg.src = canvas.toDataURL();
document.getElementById("gardenia-mug-fronte-fade").appendChild(myImg);
$('#hidden_input').val(myImg.src);
},
});
But anything happens, the function doesn't start. What I wrong?
Edit 2
Ok now I've solved in this way:
var image_wrapper = document.getElementsByClassName('image-wrapper')[0];
console.log(image_wrapper);
html2canvas(image_wrapper).then(function(canvas) {
console.log(canvas);
var myImg = new Image();
myImg.src = canvas.toDataURL();
document.getElementById("gardenia-mug-fronte-fade").appendChild(myImg);
$('#hidden_input').val(myImg.src)
});
But what I get is a white image. I need to get both images within the div with 'image-wrapper' class, of course I've to get them as shown in the above picture
I did that before with a friend, but idid the part of uploading the user image, then capture it as base:64 new image, and he was responsible for storing the output in the server.
i used html2canvas
a nice javascript library to capture any html content into an image, and it has a lot of good options
and that was an example of what the logic we did : -
capture the html content
then save it as base:64
print the image link inside a hidden input
user can submit the form, finally u receive that data
and here a piece of code i made for capture the image and print the output link inside hidden input
html2canvas($('.imgs_wrapper'), {
onrendered: function (canvas) {
var myImg = new Image();
myImg.src = canvas.toDataURL();
document.getElementById("image_reply").appendChild(myImg);
$('.hidden_input').val(myImg.src)
},
});
I'm working with an image fader program, but I'm not understanding absolute positioning. I have the images fading nicely and resizing the way I want if the screen resizes. but I have 2 problems. Div#2 gets covered up by the images. I want div2 to always appear below the image div. Also, I have control buttons on the images. I want them in the middle. I thought using top:50% would do that, but it's not. Here's an example...
var slides = document.querySelectorAll('#slides .slide');
var currentSlide = 0;
var slideInterval = setInterval(nextSlide,5000);
function nextSlide(){goToSlide(currentSlide+1);}
function previousSlide(){goToSlide(currentSlide-1);}
function goToSlide(n){
slides[currentSlide].className = 'slide';
currentSlide = (n+slides.length)%slides.length;
slides[currentSlide].className = 'slide showing';}
var next = document.getElementById('next');
var previous = document.getElementById('previous');
next.onclick = function(){nextSlide();};
previous.onclick = function(){previousSlide();};
#slides {position: relative}
.slide{
position: absolute;
left: 0px;
top: 0px;
width:100%;
height:auto;
min-height:300px;
object-fit:cover;
opacity: 0;
box-sizing:border-box;
transition: opacity 2s;}
.showing{opacity: 1;}
.controls{
background: transparent;
color: #fff;
font-size: 30px;
cursor: pointer;
border: 1px solid #555;
width: 30px;
position: absolute;
}
.controls:hover{ opacity:.5}
.fadenext{right: 10px; top: 50%;}
.fadeprev{left: 10px; top: 50%;}
<br><br>
<div id="slides">
<img src='https://www.panotools.org/dersch/Monp.JPG' class="slide showing">
<img src='https://www.panotools.org/dersch/StBp.JPG' class="slide">
<button class="controls fadeprev" id="previous"><</button>
<button class="controls fadenext" id="next">></button>
</div>
<div style='margin-top:40px;border:1px solid red;width:200px;height:100px'>
This is Div # 2</div>
I've amended your snippet to fix your issues.
Adding margin-top instead of top will fix your issue with the
controls.
Div 2 will now always remain below your slider.
P.S. I moved your div2 inline styles to keep it neat.
var slides = document.querySelectorAll('#slides .slide');
var currentSlide = 0;
var slideInterval = setInterval(nextSlide, 5000);
function nextSlide() {
goToSlide(currentSlide + 1);
}
function previousSlide() {
goToSlide(currentSlide - 1);
}
function goToSlide(n) {
slides[currentSlide].className = 'slide';
currentSlide = (n + slides.length) % slides.length;
slides[currentSlide].className = 'slide showing';
}
var next = document.getElementById('next');
var previous = document.getElementById('previous');
next.onclick = function() {
nextSlide();
};
previous.onclick = function() {
previousSlide();
};
* {
margin: 0;
padding: 0;
}
#slides {
position: relative
}
.slide {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: auto;
min-height: 300px;
object-fit: cover;
opacity: 0;
box-sizing: border-box;
transition: opacity 2s;
}
.showing {
opacity: 1;
}
.controls {
background: transparent;
color: #fff;
font-size: 30px;
cursor: pointer;
border: 1px solid #555;
width: 30px;
position: absolute;
}
.controls:hover {
opacity: .5
}
.fadenext {
right: 10px;
margin-top: 25%;
}
.fadeprev {
left: 10px;
margin-top: 25%;
}
.div2 {
margin-top: 50%;
border: 1px solid red;
width: 200px;
height: 100px;
}
<br><br>
<div id="slides">
<img src='https://www.panotools.org/dersch/Monp.JPG' class="slide showing">
<img src='https://www.panotools.org/dersch/StBp.JPG' class="slide">
<button class="controls fadeprev" id="previous"><</button>
<button class="controls fadenext" id="next">></button>
</div>
<div class="div2">This is Div # 2</div>
It's not feasible to use % based positions when you use "top" style. So to achieve what you want to do, use margin-top instead. As shown below:
.fadenext{right: 10px; margin-top: 25%;}
.fadeprev{left: 10px; margin-top: 25%;}
And for your div2, just change it's style to:
margin-top: 50%
I have a situation trying to implement this pulse loader code into my theme pages.
As far as I've read, somehow there should be a setTimeout (function() implemented but not so sure how to integrate this into my js file:
jQuery(document).ready(function(){
setTimeout(function(){
$("div.loader").fadeOut( 500, function(){
$("div#content").fadeIn( 3000);
});
}, 2500);
});
In a few words, the pulse dot, it doesn't show up before the page content appearance, like we have in this site example, it show up in the same time (too late) almost when the content is already loaded.
My result with Live examples:
here;
If this helps, here is the original theme js sequence from the app.min.js file, that should manage a .gif loader:
...
var $doc = $(document), win = $(window), Modernizr = window.Modernizr, AnimationsArray = [];
window.SITE = {
init: function() {
var self = this, content = $("#wrapper"), pl = content.find(">.preloader"), count = $("body").data("cart-count");
favicon = new Favico({
bgColor: "#151515",
textColor: "#fff"
}), favicon.badge(count), content.waitForImages(function() {
TweenMax.to(pl, 1, {
autoAlpha: 0,
ease: Quart.easeOut,
onComplete: function() {
pl.css("display", "none");
}
});
...
I've replaced .loader with .sk-spinner-pulse.sk-spinner resulting:
...
var $doc = $(document), win = $(window), Modernizr = window.Modernizr, AnimationsArray = [];
window.SITE = {
init: function() {
var self = this, content = $("#wrapper"), pl = content.find(">.sk-spinner-pulse.sk-spinner"), count = $("body").data("cart-count");
favicon = new Favico({
bgColor: "#151515",
textColor: "#fff"
}), favicon.badge(count), content.waitForImages(function() {
TweenMax.to(pl, 1, {
autoAlpha: 0,
ease: Quart.easeOut,
onComplete: function() {
pl.css("display", "none");
}
});
...
Also in css I had in the preloader section:
...
#wrapper .preloader {
position: fixed;
z-index: 998;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: 80px 60px 0;
background: #f9f9f9 url("../img/preloader.gif") center center no-repeat;
-moz-background-size: 55px 55px;
-o-background-size: 55px 55px;
-webkit-background-size: 55px 55px;
background-size: 55px 55px;
}
.site_bars_off #wrapper .preloader {
margin-left: 0;
margin-right: 0;
}
.site_bars_off #wrapper .preloader {
margin-left: 0;
margin-right: 0;
}
#media only screen and (max-width: 40.063em) {
#wrapper .preloader {
margin-left: 0;
margin-right: 0;
}
}
...
modified as follow:
...
#wrapper .sk-spinner-pulse.sk-spinner {
left: 50%;
position: fixed;
top: 50%;
width: 45px;
height: 45px;
margin: 0 auto;
background-color: gold;
border-radius: 100%;
-webkit-animation: sk-pulseScaleOut 1s infinite ease-in-out;
animation: sk-pulseScaleOut 1s infinite ease-in-out;
}
#-webkit-keyframes sk-pulseScaleOut {
0% {
-webkit-transform: scale(0);
transform: scale(0);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0;
}
}
#keyframes sk-pulseScaleOut {
0% {
-webkit-transform: scale(0);
transform: scale(0);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0;
}
}
.site_bars_off #wrapper .sk-spinner-pulse.sk-spinner {
margin-left: 0;
margin-right: 0;
}
.site_bars_off #wrapper .sk-spinner-pulse.sk-spinner {
margin-left: 0;
margin-right: 0;
}
#media only screen and (max-width: 40.063em) {
#wrapper .sk-spinner-pulse.sk-spinner {
margin-left: 0;
margin-right: 0;
}
}
...
In header.php I've replaced:
...
<!-- Start Loader -->
<div class="preloader"></div>
<!-- End Loader -->
...
with:
...
<!-- Start Loader -->
<div class="sk-spinner sk-spinner-pulse"></div>
<!-- End Loader -->
...
Any thoughts?
Use window.onload event to make the animation instead of using a timeout. Example:
jQuery(function($){
$(window).load(function(){
$(".sk-spinner-pulse").fadeOut(500);
$("#wrapper").css("opacity","1");
});
});
window.onload waits for the document and all it's images to load.
The pulse loader should be visible once the document loads, it should be outside your #wrapper div.