Как загрузить изображение по запросу

-1

У меня есть это простое изображение zoom jQuery. Вот Demo example. Он использует jQuery elevateZoom.Как загрузить изображение по запросу

код позади очень прост:

<img id="zoom_05" src='small_image1.png' data-zoom-image="large_image1.jpg"/> 
<script> 
    $vc("#zoom_05").elevateZoom({ 
    zoomType    : "inner", 
    cursor: "crosshair" 
}); 
</script>

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

источник

2013-06-26 RaduS

В «демонстрационный пример» загружает страницы оба изображения в начале, маленький [ 'png'] (http://elegantmembers.com/demo/images/small/image1.png) и большой ['jpg'] (http://elegantmembers.com/demo/images/large/image1.jpg), примерно 175 KB. –

Да, я знаю это. Мой вопрос: как я могу предотвратить загрузку большого изображения, пока мышь не окажется над изображением. Я не хочу, чтобы он загружался при попрошайничестве – RaduS

Не похоже, что поддерживается плагином, который вы используете. http://www.elevateweb.co.uk/image-zoom/configuration –

img element (id = "zoom_05") выше, не загружал бы large_image1.jpg самостоятельно. Большая загрузка изображения происходит, потому что elevateZoom() просматривает значение его значения масштабирования и сразу же загружает его. Один из способов этого поведения - отменить ElevateZoom(), пока пользователь не наведет верх над маленьким изображением в первый раз. Быстрый пример:

jQuery(function() { 

    var elevate_zoom_attached = false, $zoom_05 = $("#zoom_05") ; 

    $zoom_05.hover(
    // hover IN 
    function() { 
     if (! elevate_zoom_attached) { 
     $zoom_05.elevateZoom({ 
        zoomType : "inner", 
        cursor : "crosshair" 
       }); 
     elevate_zoom_attached = true ; 
     }; 
    }, 
    // hover OUT 
    function() { 
     if (elevate_zoom_attached) { // no need for hover any more 
      $zoom_05.off("hover"); 
     } 
    } 
); 

}) ;

Разума вы это быстро, на топе-моей головку коды, но он должен работать ... Кроме того, в этом случае elevateZoom() действие не может быть немедленным, а большое изображение загрузка продолжается.

источник

2013-06-26 15:25:37

Спасибо за код. Не могли бы вы рассказать, куда мне его вставить. – RaduS

просто вложил код в стандартный jQuery (function() {}); startup event, который происходит, как только dom готов ... –

Спасибо DBJDBJ :) – RaduS

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

<img class="zoom" src="myimage.png" data-zoom-image="mybigimage.png"/> 

$('.zoom').hover(
    // hover IN 
    function() { 

    var currImg = $(this); //get the current image 
    if (!currImg.hasClass('zoomon')) { //if it hasn't been initialized 
     currImg.elevateZoom(); //initialize elevateZoom 
     currImg.addClass('zoomon'); //add the zoomon class to the img so it doesn't re-initialize 
    } 
})

источник

2014-05-06 14:35:03 osyntax

Как загрузить изображение по запросу

ответ

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