jQuery hide () метод не сразу вступает в силу в IE8? - PullRequest
Новая
       12

jQuery hide () метод не сразу вступает в силу в IE8?

3 голосов
/ 29 августа 2011

У нас есть изображения, которые выровнены по центру по вертикали с помощью jQuery. Мы хотим скрыть неправильно выровненные изображения (то есть не по центру) на $(document).ready, затем запустить функцию центрирования на window.onload, а затем показать изображения после этого.

Изображения сразу скрываются в Firefox и Chrome при загрузке страницы. Но в IE8 на короткую секунду он все еще показывает смещенные изображения, прежде чем скрыть их.

Есть ли способ для IE8 скрыть их быстрее / немедленно? Ниже приведен код: 

<script language="javascript" type="text/javascript">
$(document).ready(function() {
    $('.img_mask img').hide();
});

window.onload = function() {
    $('.img_mask img').each(function() {
        var $img = $(this);
        var h = $img.height();
        var w = $img.width();
        $img.css('margin-top', +h / -2 + "px").css('margin-left',+ w/ -2 + "px");
        $('.img_mask img').show();
    });

Ответы [ 7 ]

3 голосов
/ 29 августа 2011

Вы не можете гарантировать, что javascript будет запущен до того, как на странице отобразятся вещи. Вы просто не можете, и IE хуже всех.

У вас есть несколько вариантов решения вашей проблемы:

  1. Используйте правило таблицы стилей CSS, которое изначально скрывает изображения, а затем используйте JavaScript для отображения только выровненных.
  2. Не помещайте неправильно выровненные изображения в DOM - вставляйте только выровненные. Это может потребовать изменения работы вашей HTML-страницы. Изображения могут быть в массиве javascript, и вы загружаете их через JS и вставляете только те, которые будут выровнены.
  3. Скрывайте контейнер изображений, пока вы не запустите свой javascript и не отфильтруете неправильно выровненные изображения.

Если вы заботитесь о сайтах, у которых нет javascript, вы также можете отобразить изначально скрытые изображения в теге <noscript>, используя правило CSS в тегах <style>

1 голос
/ 29 августа 2011

вы должны скрыть img используя display:none или visibility:hidden как 

.img_mask{
  visibility:hidden;
}

Затем показать изображения, используя .show()

0 голосов
/ 29 августа 2011 
$(document).ready(function() {}

Функция document.ready () работает так, как следует из названия. Документ относится к DOM или объектной модели документа, в то время как в этом случае «готов» относится к тому моменту, когда DOM зарегистрирован браузером. Таким образом, ваш код будет ждать, пока все будет готово и начнет работать над ним. Вот почему вы столкнулись с некоторой задержкой.

0 голосов
/ 29 августа 2011

Работает ли это, если вы встраиваете скрипт в HTML, сразу после объявления последнего элемента? 

<head>
    <script type="text/javascript">
        window.onload = function() {
             // Image aligning code goes here
        }
    </script>
</head>
<body>
    <div class='img_mask'>
        <img src="http://www.hollywoodgo.com/wp-content/uploads/2010/04/smurfs-movie-225x300.jpg"
    </div>

    <script type="text/javascript">
         $('.img_mask img').hide(); 
    </script>
</body>

Это работает для меня, но у меня не установлен IE8 для его тестирования.

Я бы сказал, что лучше иметь изображения видимыми в HTML и скрывать их через скрипт (как вы делаете), а не скрывать их в HTML и показывать через скрипт.

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

0 голосов
/ 29 августа 2011

Ваша логическая потребность должна быть улучшена.Вам следует сначала спрятать img, прежде чем он добавится к DOM, ожидая выполнения условия, а затем показать его. 

$('hiddenimg').hide().appendTo($(body));

window.onload = function () {
    if (/*some conditions*/) {
        $('hiddenimg').show();
    }
}
0 голосов
/ 29 августа 2011

попробуйте другие методы для ускорения выбора изображения. 

$('.img_mask').find('img').hide();
0 голосов
/ 29 августа 2011

Вы можете использовать функцию .ready, чтобы скрыть ее при загрузке, а затем отобразить другие данные после этого?

Посмотрите на функцию jquery .ready () ...

http://api.jquery.com/ready/

Вроде как 3nigma и .. jfriend сказал ..., установите элемент для начального отображения: none; а затем показать это в событии или задержке ... может помочь сгладить ситуацию?

...