H5W3
当前位置:H5W3 > 其他技术问题 > 正文

【Web前端问题】有什么办法可以解决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这个图片呢?

回答:

虽然没怎么看懂你的问题,但是我想说解决此类问题通常采用的方式是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");

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

回答:

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

回答:

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

回答:

也許 ajax …

    var img_target = [
        {"target": "/wp-content/uploads/aaacj/202104181234/8088131001.png", "new": "/wp-content/uploads/aaacj/202104181234/8089131002.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);
    });

回答:

不在src里设值,设在–default里咯。

回答:

一楼正解,图片延时加载

回答:

后来既然敢推过来,就可以在append之前拦截,修改可以

回答:

从没见过这种伪需求

回答:

你这么写当然加载2次。

回答:

无解,原图片想用又不想加载,可能不….

回答:

不要写src=”a.jpg”,换成pSrc=”b.jpg”或者其它
安利下自己的一个组件
https://github.com/jayZOU/pre…

回答:

使用图片预加载技术

回答:

楼主问题没说清楚,是js修改后同步加载图像导致页面加载变慢,搞成异步就好啦。

回答:

<img>元素如果有src属性,只要<img>元素在dom树中解析了,就会发送请求的。

你这个的话,要是必须初始HTML结构中有img标签,可以不写src属性。或者js代码执行过程中动态创建img元素添加到dom树中。

回答:

不想加载就不要写img,或者不要写src属性;想加载的时候动态写入img或者src属性。

注:img只有在有src属性或者在src属性有值的时候才会请求资源。

回答:

img标签如果写了src就会加载资源

回答:

HTML那边不要设置src属性,可以换成data-src,再用js判断按需加载

本文地址:H5W3 » 【Web前端问题】有什么办法可以解决jq修改图片src后图片资源加载两次的问题?

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址