加载页面并完全下载图像后，动态替换image src [英] Dynamically replace image src after the page loaded and the image is completely downloaded

问题描述

我试图创建一个简单的惰性图像加载，以便在页面已加载且图像已完全下载后，将默认图像替换为主要图像.但是在使用下面的jquery代码时却出错了.

Am trying to create a simple lazy image load to replace default image with main item image after page has loaded and image is fully downloaded. But am getting and error using below jquery code.

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.

The above script give this error TypeError: e.indexOf is not a function[Learn More] jquery-3.2.1.min.js:2:82466.

我也尝试使用下面的代码，并且它可以正常工作，但不是很确定在替换src之前它确实等待图像下载，因为它总是替换一页加载.

I have also tried to use below code and it worked but am not very sure that it does wait for the image to download before replacing the src, because it always replace one page load.

$(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;
            }

    });
});

推荐答案

load 是不是.on("load"的快捷方式，它的功能完全不同(从服务器加载HTML并将其放在元素中).另外，请始终在之前设置src之前挂钩load事件，而不是之后挂钩，以避免出现竞争情况.

load is not a shortcut for .on("load", it does something completely different (loads HTML from the server and put it in the element). Separately, always hook the load event before setting src, not after, to avoid race conditions.

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

使用on代替load解决了怪异的url.indexOf(在缩小版本中为e.indexOf)错误:

Using on instead of load solves the weird url.indexOf (e.indexOf in the minified version) error:

$(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>

这篇关于加载页面并完全下载图像后，动态替换image src的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！