javascript - jQuery .css background-image preload -
I'm sorry that the title is very ambiguous, I was not sure it was the best way to describe it in a short title. is. My friend is helping me develop this simple site for myself, it is the sound of nature's rest.
This is a code made by my friend, now I will ask him, but he is on a bike ride across the UK and will last for some time.
$ (function () {var one = document. GetElementById ("one"); var dusk = document.getElementById ("dusk"); var water = document.getElementById ("water" ); Var storm = document.getElementById ("storm"); var game = ""; var mute = false; $ ('# mute'). ('Click', function (e) {$ ('. Icon '). Toggleclass ("Closed"); e.preventDefault ();}); $ ("#mute") Click (function () {if (mute) {forest.volume = 0; dusk.volume = 0 ; Water volume = 0; storm; volume = 0; silence = true;} and (forest.valm = 1; dusk.volume = 1; water Valmu = 1; storm; volume = 1; silence = false;}}) ; $ (".") (For example "one"). ("." St); return;} $ ('# panda'). Feedto ('slow', 0.1, function () {$ (this). CSS ('background-image', 'url (image / forest jpg)') Fido ("slow", 1.4); game = "forest"; fade (forest); breakdown; "twilight" case: if (game == "twilight") {fade (back); return;} $ ('# Panda') .FadeTo ('slow', 0.1, function () {$ (this). CSS ('background-image', 'url (images / dusk.jpg)');}). ('Slow ', 1.4); game = "evening"; Fade (Twilight Bella); break; The case "water": if (game == "water") {fade (water); Return; } $ ('# Panda'). Feedto ('slow', 0.1, function () {$ (this). CSS ('background-image', 'url (image / water .jpg)')}). ('Slow', 1.4); Game = "water"; Fade (water); break; Case "storm": if (game == "storm") {fade (storm); Return; } $ ('# Panda'). Feedto ('slow', 0.1, function () {$ (this). CSS ('background-image', 'url (images / rain. Jpg)')}). ('Slow', 1.4); Game = "storm"; Fade (storm); break; } Console.log (game); }); I think 'and I say that primarily I am a designer, but this is a matter of concern.
$ (this). CSS ('background-image', 'url (images / rain. Jpg)'); or any type of voice, as you can see that the code is only coefficient
now basically when you switch from one background to another , This does not load the background image easily for the first time, can it be loaded easily anyway? So preload. CSS changes? I do not know, sorry I do not know how well it works.
Any advice is really appreciated. Recommendations or whatever
You can try to pre-load the images in html, when The time comes when the background image will be in the cache. Here's what I mean:
Place this div in the tag's opening
& lt; Div class = "preload" & gt; & Lt; Img src = "css / images / path-to-your-img.jpg" alt = "" & gt; & Lt; Img src = "css / images / path-to-your-img.jpg" alt = "" & gt; & Lt; Img src = "css / images / path-to-your-img.jpg" alt = "" & gt; & Lt; Img src = "css / images / path-to-your-img.jpg" alt = "" & gt; & Lt; / Div & gt; & Lt ;! - /.preload - & gt; Then add it to your CSS:
.preload {opacity: 0; Status: Completed; Top: -9999 pixels; Left: -9999px; } One of the many ways to preload IMG is that HTML and CSS preffer
Comments
Post a Comment