Когато правите създаване оформление и всякакви трикове със снимки (обикновено с заместване задържане на курсора или дори тяхната анимация) винаги vspylyvaet такъв нюанс как подтиска качване на снимки / изображения. На пръв поглед, проблемът не е толкова сериозен и, веднага след като изображенията са заредени, всичко работи добре, но първата навъртам ефект, който се опитвате да качите изображение и да го замени в същото време, да създадете прашка ефект, който изглежда доста често не е много хубаво и може да развали първото впечатление на потребителите на сайта си.
С анимацията е още по-лошо. Представете си, например, трябва да се постави в JS (JQuery) proezzhayushuyu автомобили, замествайки за 2 секунди с автобус. Изображения от машината и различен автобус. Въпреки това, те ще се зареди само в момент, когато браузърът ще ги получават с възможността за връзка podgruzki (т.е. в началото на анимацията). На изтеглянето на този образ ще трябва няколко секунди. Това означава, че се оказва, че половината от две секунди при анимацията този образ ще се зареди само - това не е заповед.
Но всичко това може да се коригира предварително зареждане (предварително зареждане) изображения, което дава възможност да се зареди картинки в буфера веднага при зареждане на главната страница (или дори преди това). Това е, което искам да ви кажа, в тази статия.
Звучи трудно? =) А и изглежда точно като този код, където искате да замените пътя до изображението върху нея и всичко ще се получи:
Ако имате нужда да се зареди няколко изображения, можете просто да изброяват ги разделени със запетаи, като този:
Снимки може да бъде всеки брой. Важно е не забравяйте за функцията JQuery без предварително натоварване не работи.
Този метод има недостатъци, като например факта, че тя зависи от това дали JS включени в браузъра на потребителя. Но от личен опит мога да кажа, че ако равни на тези с JS инвалиди, след това много няма да бъде в състояние да прилага съвременни технологии на строителна площадка. Да, и такива потребители, мисля, не толкова много. Като цяло, трябва да бъде в по-голямата част, а по-голямата част не kastomiziruet браузър до такава степен.
Аз лично имам много проекти предпочитат да го използват по този начин podgruzki се дължи на факта, че е лесно за изпълнение.
Предварителното зареждане на изображения с помощта на новия HTML5 vozmozhnestey
Този метод е сравнително нова оглед на факта, че тя HTML5 технологията а наскоро започна. Нейната същност е, че сте качили картинката подпечатан чрез маркера на връзката, но атрибут относителен (тип натоварваща елемент), трябва да се напише, че е предварително натоварване. По този начин, браузърът може да използва този етикет и автоматично зарежда изображението в клипборда.
Това се прави чрез добавяне на HTML код за този етикет тук (линк към образа на мен си):
Тук отн предписано параметър 2: изобрази предварително - за Нейно Величество Chrome и предварително извличане - за други браузъри. Ако искате да се качите по-голям брой снимки, след което можете да копирате маркер и да се замени връзката, тъй като много пъти:
Плюс това този метод е, че на разстояние JS няма да повлияе на пренатоварването, но лично аз виждам два очевидни недостатъци:
1) HTML5 технологии, и по този начин, този метод на предварително натоварване, не се поддържа от всички браузъри. Сега, обаче, браузърите актуализира и повечето съвременни браузъри развиващите се признават HTML5, но vseravno тя все още е далеч от идеалното.
2) По-gramozdky за разлика от изпълнението на JS, защото всяко изображение, ще трябва да се опише конкретен маркер (и отн с различни параметри, които биха постигнали нещо в близост до кръстосано браузър).
Като цяло, мисля, че този метод е обещаващ, но това отнема време. Сега тя липсва гъвкавост.
Предварително зареждане на изображения върху доказан път HTML
Първата идея, която ми идва на ум е обикновено на чист HTML - е да се създаде блок параметър CSS DIV "дисплей: няма;". в него снимка и тя трябва да се презареждат. В действителност, тя не работи, браузърът ще започне да се зарежда в буфера, само когато на дисплея ще бъде различен от никой.
Но аз измислил начин да използват трикове CSS. Аз ще ви кажа повече за него.
Поставянето в невидима единица чрез CSS непрозрачност и позицията (позициониране)
СГО има имот - непрозрачност. Неговата мисия - за промяна на прозрачността и промените непрозрачността може да бъде до нулата. В допълнение, CSS има и позиция имот, който искате да поставите елементи на страницата (може да се движат на единица пиксел по пиксел с информацията, без значение къде в рамките на и извън видимостта на страница). Всичко това е полезно за нас:
По този начин ние получаваме невидима блок в картината, която също е в действителност се намират извън видимата информация за потребителя. В този вид позициониране извън екрана, между другото, често се използва, ако искате да създадете един невидим блок, често се разглежда като зашит позоваване на безплатни шаблони по този начин. Значи ли, че всички =)
Ако искате да се презареждат на няколко изображения по този начин, те са достатъчни, за да покаже на устройството вътре в DIV, така:
Наистина бих искал да знам, какво е вашето име и как да се свържем с вас. Попълването на тази информация няма да ви отнеме много време, а аз ще бъда благодарен за това!
Уебсайт (по избор):
Моят блог автоматично ще запомни вашето потребителско име / електронна поща в рамките на текущия браузър. Ако е необходимо, те винаги може да се нулира.
Абонирайте се за моя блог
Искате първи да знаете за най-интересните? След това се абонирате за нашия бюлетин.
Като се абонирате за бюлетина, вие винаги ще бъде на първо място да се запознаят с най-важните и полезни за блогъри и уебмастъри информация.
Или гледам новините
Създаване на сайт, за да се печелят в интернет и съвсем реална. И моя блог ще ви помогне с това.