Нужно загрузить изображения в два блока (#div_left
, #div_right
) после полной загрузки страницы сайта.
-
Почему не загружать вместе со страницей?– cpp_user16 июл 2015 в 23:06
-
Фото большие и тормозят загрузку страницы сайта– user18544716 июл 2015 в 23:34
-
Грузят сначала маленькие превьюшки вообще то.– cpp_user16 июл 2015 в 23:39
-
Да я знаю но мне этот вариант не подходит– user18544717 июл 2015 в 0:36
-
@Muson взгляните на мой ответ либо можно воспользоваться готовым плагином ленивой загрузки, как посоветовал IonDen– Alliswell17 июл 2015 в 10:34
4 ответа
Вместо src
напишите что-нибудь вроде data-src
. Потом, когда надо загрузить изображения, напишите $('[data-src]').each(changeDataSrcToSrc)
;
jQuery(function($) {
$('[data-src]').each(changeDataSrcToSrc);
});
function changeDataSrcToSrc(i, e) {
e.src = $(e).data('src');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Hello
<img data-src="//placehold.it/32x20">
<img data-src="//placehold.it/32x40">
<img data-src="//placehold.it/32x50">
world
<img data-src="//placehold.it/32x10">
Вы так же можете попробовать использовать плагин LazyLoad Он предназначен для того, чтобы загружать изображения только после того, как пользователь доскроллил до них. В вашем случае, если изображения уже есть в области видимости, они так же начнут загружаться только после того, как загрузился весь DOM и запустился JS.
Стандартное решение примерно такое:
HTML
<img style="display:none;" src="...">
// либо если используете bootstrap
<img class="hidden" src="...">
JS
window.load = function() {
$('img').show();
};
Скорее всего так:
$(function() {
$("#div_left").css('background-image', '/img1.png');
$("#div_right").css('background-image', '/img2.png');
});
Но если надо дождаться загрузки всех картинок на странице и только после этого добавлять фон, то так:
$(window).load(function() {
$("#div_left").css('background-image', '/img1.png');
$("#div_right").css('background-image', '/img2.png');
});
PS: http://tech-blog.maddyzone.com/javascript/document-ready-vs-window-load-vs-window-onload