Preload Страница

Я хочу создать предварительный загрузчик моей полной страницы.Preload Страница

<body> 
<div id="preload-content">Please wait</div> 
<div id="body-container" style="background-image:url(very-big-image-file.jpg);"> 
// page contents goes here 
</div> 
</body>

сейчас у меня есть огромное изображение в моем # корпусе-контейнере. Я использую jQuery, и когда я использую страницу функции .ready(), но изображения по-прежнему загружаются.

$("body").ready(function() { 
    $("#preload-content").delay(500).fadeOut(400, function() { 
     $("#body-container").fadeIn(200); 
     $("body").css("background-color","#fff").css("color","#000"); 
    }); 
});

$ (document) .ready() также не работает. Я хочу показать # body-container после того, как все изображения, плагины, скрипты, css-файлы загружены успешно! так ... как я могу это сделать.

источник

2010-12-03 mrtakdnz

Изображение загружается в отдельном потоке. Таким образом, это не повлияет на функцию ready(). – WaiLam 2010-12-03 08:57:11

Вы можете попробовать.

 $("body").ready(function() { 

     // Create a image object 
     var bgImage = new Image(); 

     // bind loading event 
     $(bgImage).bind("onload",function(){ 

      // Set the background css 
      $("#body-container").css('background-image','url(very-big-image-file.jpg)'); 

      // Fade your preloader content 
      $("#preload-content").delay(500).fadeOut(400, function() { 
       $("#body-container").fadeIn(200); 
       $("body").css("background-color","#fff").css("color","#000"); 
      }); 
     }); 

     //Start loading your image 
     bgImage.src = "very-big-image-file.jpg"; 

     });

Извините за ошибку при опечатке. Но концепция такова.

источник

2010-12-03 09:03:20 WaiLam

но что я могу сделать, если у меня есть более крупные изображения на моей странице? мне нужно связать все функции загрузки изображений друг с другом? – mrtakdnz 2010-12-03 09:15:19

Да, вы можете создать функцию preloader, которая вводит массив пути imge, который вы хотите предварительно загрузить. Но я не думаю, что полезно предварительно загружать большое количество изображений перед отображением страницы. – WaiLam 2010-12-03 09:24:04

Когда вы вызываете $("anything").ready(), все идет в одно и то же место (и обработчик событий, когда DOM готов, не обязательно все ресурсы), селектор фактически не имеет значения.

То, что вы хотите здесь, хотя это window.onload, который срабатывает, когда изображения загружены, а также, как это:

$(window).load(function() { 
    $("#preload-content").delay(500).fadeOut(400, function() { 
     $("#body-container").fadeIn(200); 
     $("body").css("background-color","#fff").css("color","#000"); 
    }); 
});

Убедитесь, что это вне любых document.ready обработчиков, поскольку есть шанс onload событие уже выполненный тогда.

источник

2010-12-03 09:37:49

Попробуйте это:

<html> 
    <head> 
     <!-- Include the heartcode canvasloader js file --> 
    <script src="http://heartcode-canvasloader.googlecode.com/files/heartcode-canvasloader-min-0.9.1.js"></script> 

     <style type="text/css"> 
     body, html { 
      margin:0; 
      padding:0; 
      overflow:hidden; 
      background-color:#353535; 
     } 
     .wrapper { 
      position:absolute; 
      top:50%; 
      left:50%; 
     } 
      #contenedor { 
        background-color: #fff; 
      } 
    </style> 
    </head> 

    <body onLoad="document.getElementById('precarga').style.visibility='hidden';document.getElementById('contenedor').style.visibility='visible';" > 

     <div id="precarga" style="visibility: visible"> 
      <!-- Create a div which will be the canvasloader wrapper -->  
    <div id="canvasloader-container" class="wrapper"></div> 

    <!-- This script creates a new CanvasLoader instance and places it in the wrapper div --> 
    <script type="text/javascript"> 
     var cl = new CanvasLoader('canvasloader-container'); 
     cl.setColor('#9e9e9e'); // default is '#000000' 
     cl.setShape('spiral'); // default is 'oval' 
     cl.setDiameter(200); // default is 40 
     cl.setDensity(160); // default is 40 
     cl.setRange(1); // default is 1.3 
       cl.setSpeed(1); // default is 2 
     cl.setFPS(60); // default is 24 
     cl.show(); // Hidden by default 

     // This bit is only for positioning - not necessary 
     var loaderObj = document.getElementById("canvasLoader"); 
     loaderObj.style.position = "absolute"; 
     loaderObj.style["top"] = cl.getDiameter() * -0.5 + "px"; 
     loaderObj.style["left"] = cl.getDiameter() * -0.5 + "px"; 
    </script> 
     </div> 

     <div id="contenedor" style="visibility: hidden"> 
      <!-- Modify this with your content [start] --> 
      <p align="justify"> 
       Lorem ipsum dolor sit amet, sit rhoncus tellus tristique ipsum, etiam enim commodo purus ligula, dui praesent vivamus fusce vel, justo vitae nesciunt suspendisse. Pretium elit maecenas mollis pellentesque, leo in vestibulum vitae habitasse dolor lacus, elit pharetra nec cras suspendisse, lectus eget nulla elit. Ut sapien velit quis accumsan nibh varius. Nunc maecenas, eu sapien porttitor convallis, nullam cras. Dolores mauris cum at velit, mauris posuere nunc euismod. Vel leo volutpat scelerisque aliquam mi.</p> 
      <p align="justify"> 
       Aenean sed per nec in facilisis ullamcorper, mattis cras neque mauris fusce. Non odio gravida et, aliquet laoreet ac consequat risus, ut ridiculus sit massa est. A tristique adipiscing nulla, vel interdum magna. Luctus tincidunt curabitur erat ac, nisl praesent odio, in ullamcorper sem, proin tortor, dignissim feugiat orci non quam vitae mi. Id amet, vitae magna nunc velit vel, cras wisi tincidunt magnam at donec venenatis. Rutrum quis turpis eget. Nec quis donec sed non ultrices gravida, suscipit varius vivamus, velit libero quis imperdiet molestie.</p> 
      <p align="justify"> 
       Pellentesque ornare eu lacus non, pede tempus velit duis, gravida nam phasellus sem, amet accumsan tincidunt wisi. Et libero et neque, aliquam pretium rerum neque, feugiat malesuada est sed autem a platea, lectus ultrices. Vitae tristique aliquet, tincidunt wisi velit odio sodales nunc nunc. Sed tincidunt turpis a nullam magna, sagittis vestibulum pellentesque integer montes neque, nunc odio neque diam lorem integer, sociis eu. Maecenas ut lectus senectus auctor dictum, ligula volutpat nulla pulvinar nam pellentesque pellentesque, vitae morbi magna dui in risus, aliquam vel mi odio purus duis suspendisse, justo mattis morbi integer. Pretium nec a, duis nunc mi, in vel. Lacus dui, eros nulla justo sollicitudin. Turpis et et pharetra non.</p> 
      <p align="justify"> 
       Nunc maecenas turpis, vel in sed eget arcu, elit vitae. Curabitur et odio in ornare metus est. Massa porttitor consectetuer. Vitae bibendum, consectetuer duis diam quam in, est etiam aliquam enim molestie scelerisque. Vestibulum sed eros ac vitae lectus. A leo, quod volutpat id et lacus vitae vitae. Aenean tellus vivamus parturient metus, pellentesque ut lorem ut orci nisl. Ut et id luctus eros, feugiat in malesuada tellus quisque, iaculis tristique, nonummy massa voluptas vel. Elit a erat pulvinar sem sagittis, ligula eget est amet, a tristique ut ac wisi, gravida donec et eget nec. Amet nec, ut non penatibus eget, ornare purus sollicitudin a tincidunt vitae rutrum, commodo non faucibus, aut pretium risus lorem nulla egestas auctor.</p> 
      <p align="justify"> 
      </p> 
      <img src="http://v11.nonxt8.c.bigcache.googleapis.com/static.panoramio.com/photos/original/21785753.jpg?redirect_counter=1"/> 
      <!-- Modify this with your content [end] --> 
     </div> 

    </body> 
</html>

источник

2011-11-29 19:29:37

Preload Страница

ответ

Смежные вопросы