Javascript pre-render Изображение не отображается

В настоящее время я разрабатываю html-страницу для ipad с ползунком css3-перехода для различного содержимого.Javascript pre-render Изображение не отображается

Проблема, с которой я сталкиваюсь, заключается в том, что изображения на следующей странице, которые пока не отображаются, будут отображаться при перемещении их в область содержимого (хотя они предварительно загружены).

Есть ли способ заставить браузер отображать их, не отображая их при первоначальном запросе страницы, чтобы предотвратить затуманенное скользящее воздействие на изображения?

/РЕДАКТИРОВАТЬ:

слайдер Я использую: slider

структура, как:

<body> 
    <!-- wrapper --> 
    <div> 
     <!-- head --> 
     <div class="head"></div> 
     <!-- content area --> 
     <div class="content"> 
      <div class="container"> 
       <div class="pagination"></div> 
       <div class="slide-wrapper"> 
        <div class="slide"> 
         <!-- content with images here --> 
        </div> 
        <div class="slide"></div> 
        <div class="slide"></div> 
        <div class="slide"></div> 
        <div class="slide"></div> 
       </div> 
      </div>  
     </div> 
     <!-- foot --> 
     <div class="foot"></div> 
    </div> 
</body>

Изображение-Предварительная загрузка:

function preload() { 
    $('img').each(function(){ 
     $('<img/>')[0].src = $(this).attr('src'); 
    }); 
}

источник

2012-12-20 Mohammer

Как страницы структурированы? Поделитесь некоторым кодом, пожалуйста. – BenM

Пожалуйста, покажите код, который вы используете для предварительной загрузки изображений. – jfrej

Общая методика, чтобы установить их в качестве visibility: hidden (встроенный стиль для обеспечения его применения даже перед любым внешним al CSS) - И установите его на visibility: visible на image.onload обработчик.

<img src="..." style="visibility: hidden" onload="this.style.visibility = 'visible';">

Редактировать

$('img').each(function(){ 
    $(this).css('visibility', 'hidden'); 
    $('<img/>')[0].src = $(this).attr('src'); 
    $(this).load(function() { 
     $(this).css('visibility', 'visible');   
    }); 
});

источник

2012-12-20 10:37:35 techfoobar

Это не сработало для меня. Было бы здорово, если бы все было так просто. – Mohammer

проверить мое редактирование, может работать. :-) – techfoobar

Не работает. то, что я собираюсь сделать на данный момент, позволяет слайду слайда начать с конца и обратно, имея прозрачный слой, пока его в начале снова. THX за усилия до сих пор! – Mohammer

Это заставит браузер предварительно загружать все изображения

$('img').each(function(){ 
    var image = new Image(); 
    image.src = $(this).attr('src')  

});

источник

2012-12-22 18:01:50

Javascript pre-render Изображение не отображается

ответ

Смежные вопросы