Динамически заменить изображение src после загрузки страницы и загрузки изображения полностью - PullRequest
Новая
       49

Динамически заменить изображение src после загрузки страницы и загрузки изображения полностью

0 голосов
/ 12 июня 2018

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

Пример HTML 

<img src="default.png" data-src="image-1.png" class="productImage"/>
<img src="default.png" data-src="image-2.png" class="productImage"/>
<img src="default.png" data-src="image-3.png" class="productImage"/>
<img src="default.png" data-src="image-4.png" class="productImage"/>

Пример Jquery 

$(function(){
    $('img.productImage').each(function(){
       var this_image = this;
       var src = $(this_image).attr('src');
       var lsrc = $(this_image).attr('data-src');
        if(lsrc.length > 0){
            var img = new Image();
            img.src = lsrc;
            $(img).load(function() {
                this_image.src = this.src;
            });
        }else{
            this_image.src = src;
        }
    });
});

Приведенный выше скрипт выдает эту ошибку TypeError: e.indexOf is not a function[Learn More] jquery-3.2.1.min.js:2:82466.

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

$(function(){
    $('img.productImage').each(function(){
       var this_image = this;
       var src = $(this_image).attr('src');
       var lsrc = $(this_image).attr('data-src');
            if(lsrc.length > 0){
                this_image.src = lsrc;
            }else{
                this_image.src = src;
            }

    });
});

1 Ответ

0 голосов
/ 12 июня 2018

load не является ярлыком для .on("load", он делает что-то совершенно другое (загружает HTML с сервера и помещает его в элемент).Отдельно, всегда подключайте событие load до , настройку src, а не после, чтобы избежать условий гонки. 

var img = new Image();
$(img).on("load", function() {
    this_image.src = this.src;
});
img.src = lsrc;

Использование on вместо load решает странноеurl.indexOf (e.indexOf в минимизированной версии) ошибка: 

$(function(){
    $('img.productImage').each(function(){
       var this_image = this;
       var src = $(this_image).attr('src');
       var lsrc = $(this_image).attr('data-src');
       if(lsrc.length > 0){
            var img = new Image();
            $(img).on("load", function() {
                this_image.src = this.src;
            });
            img.src = lsrc;
        }else{
            this_image.src = src;
        }
    });
});
<img src="http://via.placeholder.com/100x100?text=p" data-src="http://via.placeholder.com/100x100/08f/000?text=1" class="productImage"/>
<img src="http://via.placeholder.com/100x100?text=p" data-src="http://via.placeholder.com/100x100/08f/000?text=2" class="productImage"/>
<img src="http://via.placeholder.com/100x100?text=p" data-src="http://via.placeholder.com/100x100/08f/000?text=3" class="productImage"/>
<img src="http://via.placeholder.com/100x100?text=p" data-src="http://via.placeholder.com/100x100/08f/000?text=4" class="productImage"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
...