Здравствуйте, У меня на сайте присутствуют изображения на странице и описание к ним. Проблема в том что при переходе на другую вкладку, страницу или же начальная загрузка сайта не дает возможности некоторым изображениям (или всем) загрузиться. При обновлении (перезагрузке F5) всей страницы, изображения появляются ! Как решить эту проблему?
Нет это не проблема браузера, проверял на нескольких та же ситуация. Дело в том что они попросту не успевают подгрузиться.
Мне нужно найти что-то на подобии этого Как только загружается страница с картинками, на месте картинок (если нужно время для подзагрузки) появляется загружающая анимация, после чего появляется сама картинка.
ну я имею ввиду, то что пока грузятся изображения, нужно использовать onreadystatechange - функцию, где смотреть, как изменяется readyState, который будет равен "loading", если изображения грузятся, вот, а когда загрузятся то "complete" в обш,ем в этом направлении нужно смотреть.
[js] var imgs = document.getElementsByTagName(' img '); var len = imgs.length; for(var i = 0; i < len; i++) { var img = imgs; img.onreadystatechange = function() { if(img.readyState == "loading") { //картинка тут вставляется }else if(img.readyState == "complete") { img.onreadystatechange = false; } } } [/js] как-то так но отлаживай сам, я с такой проблемой не сталкивался, но делал бы так.
[js]/* * Image Preloader * @author Gromo * @version 0.0.1 */ (function(_global){ /** * @namespace ImagePreloader * @name ImagePreloader */ ImagePreloader = function(images, callback, imageCallback) { this.images = {}; this.callback = callback; this.imageCallback = imageCallback; if(typeof images == 'string') images = [images]; var container = $('<div></div>'); container.css({ "visibility":"hidden", "position":"absolute", "top":"0", "left":"0" }).appendTo('body'); for(var i=0; i<images.length; i++){ this.images[images] = false; $('<img>') .attr('src', images) .load($.proxy(this, 'loaded')) .appendTo(container); } }; ImagePreloader.prototype = { /** * @public */ isLoaded : function(src){ return this.images[src] ? true : false; }, /** * Internal function that is called when image is loaded * @private */ loaded : function(e) { var src = $(e.target).attr('src'); this.images[src] = true; if(this.imageCallback) this.imageCallback(src); var isCallback = true; for(var src in this.images) if(!this.images[src]){ isCallback = false; break; } if(isCallback) this.callback(); } } })(window || this);[/js] пример использования: HTML: <!doctype html> <html> <head> <meta charset="UTF-8"> <title>TEST PAGE</title> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <script type="text/javascript" src="ImagePreloader.js"></script> <script type="text/javascript"> var loading_images = [ 'http://img12.nnm.ru/9/7/c/3/3/97c336f72b2827488593b4c84fd1276f_full.jpg', 'http://i56.beon.ru/85/69/16985/22/1254522/anime_wallpapers1134230959_i_4098_full.jpeg', 'http://www.sunhome.ru/UsersGallery/wallpapers/71/17201350.jpg', 'http://www.wallpaperfox.com/download/view?file=MTYwMHgxMjAwLzIwMTEwNTEzL2IzZWU0YzdmZjdiZDMxMjMwZDQwNTU1MjkyNzNhYjJhLmpwZw==' ]; //loading_images[4] = 'http://i56.beon.ru/85/69/16985/22/1254522/fake_image.jpeg'; // fake image function imageLoader(src){ $('#images').append('<div>'+src+': <img src="'+src+'" style="height: 60px;"></div>'); } var image_preloader; $(document).ready(function(){ image_preloader = new ImagePreloader(loading_images, function(){ alert('All images loaded !'); }, imageLoader); }); </script> </head> <body> <div id="images"></div> <div id="button"> <input type="button" onclick="alert(image_preloader.isLoaded(loading_images[0]));" value="IMAGE 01"> <input type="button" onclick="alert(image_preloader.isLoaded(loading_images[1]));" value="IMAGE 02"> <input type="button" onclick="alert(image_preloader.isLoaded(loading_images[2]));" value="IMAGE 03"> <input type="button" onclick="alert(image_preloader.isLoaded(loading_images[3]));" value="IMAGE 04"> <!-- input type="button" onclick="alert(image_preloader.isLoaded(loading_images[4]));" value="FAKE IMAGE" --> </div> </body> </html>