Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Fala pessoal.. tudo bom ?
fiz um codigo preloader para a pagina e fiz tb um efeito fadein em uma img de fundo na pagina... porem quando abro no IE.. esses efeito ficam "laggados" tipo.. parece que tá lento.. ou tá pesado de mais.. e demora pra aparecer a img e vai aparecendo aos poucos.. não ocorre o efeito como deveria.. o q é ? problema do proprio IE com JS ? a img de fundo é mto pesada ?
abss
diminui a qualidade da img e os efeitos rolaram um pouco mais rapido....
pode ser ?
tem como deixar melhor sem perder a qualidade da img de fundo ?
//CONTENT WITH AJAX
$(document).ready(function(){
$(".bg").hide();
$(".bg").fadeIn("slow");
checkURL(); //check if the URL has a reference to a page and load it
$('ul li a').click(function (e){ //traverse through all our navigation links..
checkURL(this.hash); //.. and assign them a new onclick event, using their own hash as a parameter (#page1 for example)
});
setInterval("checkURL()",250); //check for a change in the URL every 250 ms to detect if the history buttons have been used
});
var lasturl=""; //here we store the current URL hash
function checkURL(hash)if(hash != lasturl) // if the hash value has changed
{
lasturl=hash; //update the current hash
loadPage(hash); // and load the new page
}
}
function loadPage(url) //the function that loads pages via AJAX url=url.replace('#','');
$('#loading').css('visibility','visible'); //show the rotating gif animation
$.ajax({ //create an ajax request to load_page.php
type: "POST",
url: "scripts/load_page.php",
data: 'page='+url, //with the page number as a parameter
dataType: "html", //expect html to be returned
success: function(msg){
if(parseInt(msg)!=0) //if no errors
{
$('#pageContent').fadeIn("slow");
$('#pageContent').html(msg); //load the returned html into pageContet
$('#loading').css('visibility','hidden'); //and hide the rotating gif
}
}
});
}
$(document).ready(function() {
// Preload all rollovers
$("#nav img").each(function() {
// Set the original src
rollsrc = $(this).attr("src");
rollON = rollsrc.replace(/.png$/ig,"_on.png");
$("<img>").attr("src", rollON);
});
// Navigation rollovers
$("#nav a").mouseover(function(){
imgsrc = $(this).children("img").attr("src");
matches = imgsrc.match(/_on/);
// don't do the rollover if state is already ON
if (!matches) {
imgsrcON = imgsrc.replace(/.png$/ig,"_on.png"); // strip off extension
$(this).children("img").attr("src", imgsrcON);
}
});
$("#nav a").mouseout(function(){
$(this).children("img").attr("src", imgsrc);
});
});
Codigo do Pre-Loader
var QueryLoader = {
/*
* QueryLoader Preload your site before displaying it!
* Author: Gaya Kessler
* Date: 23-09-09
* URL: [http://www.gayadesign.com](http://www.gayadesign.com)
* Version: 1.0
*
* A simple jQuery powered preloader to load every image on the page and in the CSS
* before displaying the page to the user.
*/
overlay: "",
loadBar: "",
preloader: "",
items: new Array(),
doneStatus: 0,
doneNow: 0,
selectorPreload: "body",
ieLoadFixTime: 2000,
ieTimeout: "",
init: function() {
if (navigator.userAgent.match(/MSIE (\d+(?:\.\d+)+(?:b\d*)?)/) == "MSIE 6.0,6.0") {
//break if IE6
return false;
}
if (QueryLoader.selectorPreload == "body") {
QueryLoader.spawnLoader();
QueryLoader.getImages(QueryLoader.selectorPreload);
QueryLoader.createPreloading();
} else {
$(document).ready(function() {
QueryLoader.spawnLoader();
QueryLoader.getImages(QueryLoader.selectorPreload);
QueryLoader.createPreloading();
});
}
//help IE drown if it is trying to die :)
QueryLoader.ieTimeout = setTimeout("QueryLoader.ieLoadFix()", QueryLoader.ieLoadFixTime);
},
ieLoadFix: function() {
var ie = navigator.userAgent.match(/MSIE (\d+(?:\.\d+)+(?:b\d*)?)/);
if (ie[0].match("MSIE")) {
while ((100 / QueryLoader.doneStatus) * QueryLoader.doneNow < 100) {
QueryLoader.imgCallback();
}
}
},
imgCallback: function() {
QueryLoader.doneNow ++;
QueryLoader.animateLoader();
},
getImages: function(selector) {
var everything = $(selector).find("*:not(script)").each(function() {
var url = "";
if ($(this).css("background-image") != "none") {
var url = $(this).css("background-image");
} else if (typeof($(this).attr("src")) != "undefined" && $(this).attr("tagName").toLowerCase() == "img") {
var url = $(this).attr("src");
}
url = url.replace("url(\"", "");
url = url.replace("url(", "");
url = url.replace("\")", "");
url = url.replace(")", "");
if (url.length > 0) {
QueryLoader.items.push(url);
}
});
},
createPreloading: function() {
QueryLoader.preloader = $("<div></div>").appendTo(QueryLoader.selectorPreload);
$(QueryLoader.preloader).css({
height: "0px",
width: "0px",
overflow: "hidden"
});
var length = QueryLoader.items.length;
QueryLoader.doneStatus = length;
for (var i = 0; i < length; i++) {
var imgLoad = $("<img></img>");
$(imgLoad).attr("src", QueryLoader.items[i]);
$(imgLoad).unbind("load");
$(imgLoad).bind("load", function() {
QueryLoader.imgCallback();
});
$(imgLoad).appendTo($(QueryLoader.preloader));
}
},
spawnLoader: function() {
if (QueryLoader.selectorPreload == "body") {
var height = $(window).height();
var width = $(window).width();
var position = "fixed";
} else {
var height = $(QueryLoader.selectorPreload).outerHeight();
var width = $(QueryLoader.selectorPreload).outerWidth();
var position = "absolute";
}
var left = $(QueryLoader.selectorPreload).offset()['left'];
var top = $(QueryLoader.selectorPreload).offset()['top'];
QueryLoader.overlay = $("<div></div>").appendTo($(QueryLoader.selectorPreload));
$(QueryLoader.overlay).addClass("QOverlay");
$(QueryLoader.overlay).css({
position: position,
top: top,
left: left,
width: width + "px",
height: height + "px"
});
QueryLoader.loadBar = $("<div></div>").appendTo($(QueryLoader.overlay));
$(QueryLoader.loadBar).addClass("QLoader");
$(QueryLoader.loadBar).css({
position: "relative",
top: "50%",
width: "0%"
});
QueryLoader.loadAmt = $("<div>0%</div>").appendTo($(QueryLoader.overlay));
$(QueryLoader.loadAmt).addClass("QAmt");
$(QueryLoader.loadAmt).css({
position: "relative",
top: "50%",
left: "50%"
});
},
animateLoader: function() {
var perc = (100 / QueryLoader.doneStatus) * QueryLoader.doneNow;
if (perc > 99) {
$(QueryLoader.loadAmt).html("100%");
$(QueryLoader.loadBar).stop().animate({
width: perc + "%"
}, 500, "linear", function() {
QueryLoader.doneLoad();
});
} else {
$(QueryLoader.loadBar).stop().animate({
width: perc + "%"
}, 500, "linear", function() { });
$(QueryLoader.loadAmt).html(Math.floor(perc)+"%");
}
},
doneLoad: function() {
//prevent IE from calling the fix
clearTimeout(QueryLoader.ieTimeout);
//determine the height of the preloader for the effect
if (QueryLoader.selectorPreload == "body") {
var height = $(window).height();
} else {
var height = $(QueryLoader.selectorPreload).outerHeight();
}
//The end animation, adjust to your likings
$(QueryLoader.loadAmt).hide();
$(QueryLoader.loadBar).animate({
height: height + "px",
top: 0
}, 500, "linear", function() {
$(QueryLoader.overlay).fadeOut(800);
$(QueryLoader.preloader).remove();
});
}
}
Pode ser alguma das coisas que você disse, e pode ser tudo oque você disse tb.
Poste o script para rodarmos, só assim teremos como analizar onde é que está perdendo performance.