JQuery изображения с предварительной загрузкой изображения - PullRequest
Новая
       8

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

2 голосов
/ 07 июня 2009 
$(document).ready(function(){
        // The plugin
        $.fn.image = function(src, f){
        return this.each(function(){
                var i = new Image();
                        i.src = src;
                        i.onload = f;
                        this.appendChild(i);
                });
        }

        // The code for the image to load
  $("#asdf").image("images/3a.jpg",function(){
            alert("The image is loaded now");
        });     
});

Я нашел вышеуказанный код. Я хочу иметь элемент, который может быть загружен с изображением, но перед тем, как изображение будет полностью загружено, я хочу, чтобы он отображал загрузочный gif (это делается с помощью css). Это работает, но покажет загрузку изображения вместо ожидания его полной загрузки. Я думаю, что я должен показывать изображение, где предупреждение использует hide () show (), но я не совсем уверен, как ссылаться на него из функции?

я попробовал это без удачи, кто-нибудь видит какие-либо проблемы>? я хочу использовать тот же div для загрузки GIF, а затем окончательное изображение 

$('#preload').replaceWith('<img src="preloader.gif" />')
          .image( "http://www.google.co.uk/intl/en_uk/images/logo.gif", function() {
             $('#preload').replaceWith( this );
             // is this called when image fully loaded?
          });

Ответы [ 3 ]

3 голосов
/ 07 июня 2009

Возможно, вы захотите использовать вместо этого плагин Lazy Loader (или аналогичный). Обратите внимание, что вы можете указать собственное изображение-заполнитель.

0 голосов
/ 08 июня 2009

нашел плагин, который делает именно то, что ищет, используя изображение-заполнитель gif, пока изображение не будет полностью загружено, а затем покажет окончательное изображение

http://flesler.blogspot.com/2008/01/jquerypreload.html

0 голосов
/ 07 июня 2009

Вы можете попробовать что-то вроде этого: 

    var $loadingImg = $('<img />').attr('id','loadingImg').attr('src','preloader.gif');
    $("#preload").html($loadingImg.html()).image("http://www.google.co.uk/intl/en_uk/images/logo.gif");

Дайте мне знать, как это происходит.

...