在页面加载和图像完全下载后动态替换图像 src

Question

我正在尝试创建一个简单的延迟图像加载，以便在页面加载和图像完全下载后用主要项目图像替换默认图像。但是我在使用下面的 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;
            }

    });
});

Answer 1

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>

在页面加载和图像完全下载后动态替换图像 src

Dynamically replace image src after the page loaded and the image is completely downloaded

jquery

lazy-loading

image