google+javascriptbanktwitter@js_bankfacebook@jsbankrss@jsbank






4 Simple Solutions pour pr?charger les images en utilisant le CSS ou JavaScript Parfois, nous devons JavaScript pr?chargement d'images sur les pages web ? certaines fins pr?vues Et ce message est un devrait -stop ? lire , parce que ce poste vous offre 4 solutions simples pour pr?charger les images n?cessaires sur vos pages Web en utilisant le CSS , le pr?chargement d'images avec jQuery et JavaScript , Mootools pr?chargement d'images Toutes les solutions sont tr?s simples ? mettre en ?uvre , s'il vous pla?t aller ? la page compl?te de la poste pour des instructions d?taill?es et des exemples de codes JavaScript
Les meilleurs moyens pour pr?charger Image JavaScript et CSS , AJAX

? Preloader MKII Image

? Preload Image avec barre de progression


Gratuit iPage hébergement Web pour la première année MOMENT



Si vous êtes toujours à la recherche d'un fournisseur d'hébergement Web fiable avec des tarifs abordables, pourquoi vous ne prenez pas un peu de temps pour essayer iPage, seulement avec $1.89/month, inclus $500+ Crédits supplémentaires gratuites pour le paiement de 24 mois ($45)?

Plus de 1.000.000 de clients + existisng peuvent pas avoir tort, vraiment vous n'êtes pas aussi! Plus important encore, lorsque vous enregistrez l'hébergement web à iPage grâce à notre lien, nous allons être heureux de renvoyer un plein remboursement. C'est génial! Vous devriez essayer iPage hébergement web GRATUITEMENT maintenant! Et contactez-nous pour tout ce que vous devez savoir sur iPage.
Essayez iPage GRATUIT première année MOMENT

If you use an image for the background image of an element on a mouseOver or :hover event(for example, navigation menu which images are used), the image will not load until the first :hover event if you only apply that background-image in the CSS for the :hover state. The preloader will help you with this! It’ll load those images when the page loads and stores them in your browsers cache. So avoid delays with rollover effects. In this article, you’ll learn 4 ways to preload images with CSS or javascript technique.

OPTION 1: Use A Little CSS(display:none;)

1#preloadedImages {
2       width: 0px;
3       height: 0px;
4       display: inline;
5       background-image: url(path/to/image1.png);
6       background-image: url(path/to/image2.png);
7       background-image: url(path/to/image3.png);
8       background-image: url(path/to/image4.png);
9       background-image: url();
10}

and below is another sample:

1ul{
2margin: 0;
3padding: 0;
4list-style-type: none;
5font: 13px ‘Lucida Grande’, Arial, sans-serif;
6}
7ul li{
8display: inline;
9}
10ul li a{
11display:block;
12width:120px;
13text-decoration: none;
14padding: 0.3em 1em;
15color: #000;
16background:url(images/link.gif);
17}
18ul li a:hover{
19width:120px;
20background:url(images/hover.gif);
21}

OPTION 2: Preload The Images With JavaScript

1<script type="text/javascript" language="JavaScript">
2companyLogo = new Image();
3companyLogo.src = "logo.gif";
4</script>

You will need to have the two lines of JavaScript for each image you want to preload, and you will need to browser has to support JavaScript and have the two lines of JavaScript in your site.

OPTION 3: Automatically Preload images from CSS With jQuery

You can download a jQuery plugin from here, attached the jQuery javascript library and preloadCssImages.jQuery_v5.js to your page, and call $.preloadCssImages(); The source code like this: 

1$(document).ready(function(){
2  $.preloadCssImages();
3});

OPTION 4: Stick The Images In a Hidden Frame

A hidden frame is just a frame window set to 0%.

JavaScript par jour


Google Safe Browsing McAfee SiteAdvisor Norton SafeWeb Dr.Web