jQuery - Попытка загрузить все / проблема с кешем - PullRequest
Новая
       22

jQuery - Попытка загрузить все / проблема с кешем

1 голос
/ 17 ноября 2011

Моя первая проблема: В настоящее время я использую $(window).load, чтобы отложить рендеринг страницы, чтобы загрузить все изображений и затем показать его.

работать со всеми тегами <img>, но не работает с тегами div, имеющими фоновое изображение .Допустим, у меня есть 30 изображений в шаблоне моего веб-сайта и 10 из них из background, указанного в CSS.

Используя функцию $(window).load, 20 из этих <img> изображений загружаются до ее запуска.Но остальные 10 будут загружены, когда страница начнет отображаться.Таким образом, веб-страница выглядит очень некрасиво до ее завершения.

Как я могу включить ее в мою windows.load функцию?

Вторая проблема: Поскольку я начал делать веб-страницу с нуля впервые, на страницах есть проблема с кешем. Я собираюсь объяснить, что я имею в виду.

Проблема в том, что после I изменить что-то в HTML (добавление или удаление изображений и т. д.). Когда я пытаюсь перезагрузить страницу в моем браузере, чтобы увидеть изменения , веб-страница переходит всумасшедший режим и все испорчено. Если не выполнить полное обновление (CTRL + F5) .Не имеет значения, какой браузер я использую. Страница выглядит испорченной после небольшого или большого изменения HTML-кода.

В моей ситуации это не нормально.Все веб-сайты на WWW меняют свой шаблон или часть своей страницы каждый день / неделю, и все выглядит так хорошо, чтобы войти.Я еще не опубликовал свой веб-сайт. Если я буду вносить изменения в код каждый раз, когда пользователь увидит странную страницу.

Что происходит?

Ответы [ 2 ]

1 голос
/ 17 ноября 2011

Для решения проблемы кэширования вы можете добавить элемент meta, который сообщает браузеру не кэшировать страницу: 

<meta http-equiv="PRAGMA" content="NO-CACHE">

Для ваших изображений их можно предварительно загрузить и только после загрузки изображений впамять позволяет браузеру выполнить некоторый скрипт.Подход будет выглядеть так: 

$(window).load(function(){
    var elementsWithBg = $('*').filter(function(){
        return (bg = $(this).css('background-image')) != '' && bg != 'none'; 
    });
    var n = elementsWithBg.length;
    function callback(){
        if(n > 0)
            return;
        ready();
    }
    elementsWithBg.each(function(i,el){
        var img = new Image();
        img.onload = function(){
           n--; 
           callback();
        };
        img.src = $(this).css('background-image').replace(/url\(['"]?(.*?)['"]?\)/g,'$1');
    });
});
function ready(){
    // your code goes here
}
0 голосов
/ 17 ноября 2011

Вы, вероятно, смотрите на файлы локально.Контроль кэша работает лучше по HTTP.

Одно предложение, которое наверняка поможет: используйте CSS-спрайты , чтобы значительно сократить количество изображений и HTTP-вызовов.По возможности используйте CSS-фон для этой техники.

...