有什么办法可以解决jq修改图片src后图片资源加载两次的问题？

html代码：

<img src="a.jpg" class="banner">

jq代码：

$(document).ready(function () {
    $(".banner").attr("src","2.jpg");
})

jq代码生效，成功地把图片a.jpg改成b.jpg。但现在有个问题是请求资源的时候会把a.jpg和b.jpg一并加载，当图片资源比较多要替换的时候，会影响性能。有没有什么办法，在img还未加载完成之前，通过jq把src的路径修改却不加载原来的a.jpg这个图片呢？

javascript jquery 前端

阅读 10.7k

17 个回答

杰枫Jeff

虽然没怎么看懂你的问题，但是我想说解决此类问题通常采用的方式是js的代理模式，参考代码如下

var myImage = (function(){
        var imgNode =document.getElementByClassName('banner')[0];
        return function(src){
            imgNode.src = src; 
        }
})();

var ProxyImage = (function(){
        var img = new Image();
        img.onload = function(){
            myImage(this.src);
        };
        return function(src) {
            myImage("a.jpg");
            img.src = src;
        }
    })();

ProxyImage("b.jpg");

原谅我原生风，你可以稍微改一下

scort

8.4k2633

发布于
2016-08-24

<img src="a.jpg" class="banner">
一开始这里一定要有值是吗？

z00001993518

16211724

发布于
2016-08-25

如果在刚开始的<img src="a.jpg" class="banner"> 这里不需要显示图片的话可以去掉src="a.jpg"，这样就不会加载a.jpg了
代码如下：
<img class="banner">

cwen0708

8116

发布于
2016-08-26

也許 ajax ...

    var img_target = [
        {"target": "https://static.orderplus.com.tw/img/logo.png", "new": "http://aa.com/a.jpg"}
    ];

    $.ajax({
        url: "index.html",
        context: document.body
    }).done(function (html) {
        $.each(img_target, function (n) {
            var item = img_target[n];
            html = html.replace(
                'src="' + item["target"] + '"',
                'data-src="' + item["target"] + '" src="' + item["new"] + '"');
        });
        console.log(html);
    });