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

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

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

12
задан Jason Plank 30 November 2011 в 13:09
поделиться

2 ответа

Когда вы говорили о других способах, вы имели в виду те, которые не используют Javascript?

<script language="JavaScript">
function preloader() 
{
     // counter
     var i = 0;

     // create object
     imageObj = new Image();

     // set image list
     images = new Array();
     images[0]="image1.jpg"
     images[1]="image2.jpg"
     images[2]="image3.jpg"
     images[3]="image4.jpg"

     // start preloading
     for(i=0; i<=3; i++) 
     {
          imageObj.src=images[i];
     }
} 
</script>

Другие способы, не использующие JS, - это разместить какой-то html на вашей странице где-нибудь, чтобы его не видели:

<image src="picture.jpg" width="1" height="1" border="0">

или HTML ...

<img src="images/arrow-down.png" class="hiddenPic" />

... и CSS ...

.hiddenPic {
    height:1px;
    width:1px;
}

Дополнительные методы JavaScript:

function preload(images) {
    if (document.images) {
        var i = 0;
        var imageArray = new Array();
        imageArray = images.split(',');
        var imageObj = new Image();
        for(i=0; i<=imageArray.length-1; i++) {
            //document.write('<img src="' + imageArray[i] + '" />');// Write to page (uncomment to check images)
            imageObj.src=images[i];
        }
    }
}

Затем загрузите изображения, используя что-то вроде:

<script type="text/javascript">
preload('image1.jpg,image2.jpg,image3.jpg');
</script>
13
ответ дан 2 December 2019 в 05:03
поделиться

"Кажется, это решение загружает изображение в дом дважды ... один раз, когда js загружает его, а затем снова, когда div слой, который загружает его, становится видимый ... поэтому он делает 2 HTTP-вызова, таким образом, не работает "

Второй HTTP-запрос должен отвечать в 304 (не измененном), так что я думаю, что это нормально? Другой вариант - загрузить изображение через jQuery, а затем вставить в качестве фонового изображения встроенное через DOM, например:

jQuery.fn.insertPreload = function(src) {
    return this.each(function() {
        var $this = $(this);
        $(new Image()).load(function(e) {
            $this.css('backgroundImage','url('+src+')');
        }).attr('src',src);
    });
};

$('div').insertPreload('[huge image source]');
2
ответ дан 2 December 2019 в 05:03
поделиться
Другие вопросы по тегам:

Похожие вопросы: