学习jquery 中遇到的小问题（有关图片预加载）

Posted 2023-05-11

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了学习jquery 中遇到的小问题（有关图片预加载）相关的知识，希望对你有一定的参考价值。

先上代码：
<html>
<head>
<script type="text/javascript" src="../../jquery-1.10.2.js"></script>
<script type="text/javascript">

$(function()

var imgs = [
"http://farm3.static.flickr.com/2661/3792282714_90584b41d5_b.jpg",
"http://farm2.static.flickr.com/1266/1402810863_d41f360b2e_o.jpg"
];

var str = "";

for(var i=0;i<imgs.length;i++)
str = $("<img style='width:200px; height:200px;'/>");
str = str.attr("src", imgs[i]);
str.load(function()

alert("img"+i+ " success!");
$("body").append(str);

);

);
</script>
</head>

<body>

</body>
</html>

大概意思是的，有两张远程图片，先预加载到系统当期加载完毕后输出先输出“img0 success”并append到body上去，再输出img1并且append到body上去，但是事与愿违，结果却是两次都输出 “img2 success” 并且只有2张图片加载到了页面上，打上断点就完全正常了，不打断点就会出现这样的错误，求求哪位大大救救我！！！

参考技术A

由于i++的执行比str.load()要早，所以第二次执行的时候str已经被覆盖，直接使用$("body").append(str);所加载的只有第二张图。

代码需要改成

<html>
    <head>
        <script type="text/javascript" src="../../jquery-1.10.2.js"></script>
        <script type="text/javascript">
            $(function()
                var imgs = [
                "http://farm3.static.flickr.com/2661/3792282714_90584b41d5_b.jpg",
                "http://farm2.static.flickr.com/1266/1402810863_d41f360b2e_o.jpg"
                ];
                for(var i = 0; i < imgs.length; i++)
                    var str = $("<img style='width:200px; height:200px;'/>");
                    str.attr("src", imgs[i]);
                    str.attr("nowIndex", i);
                    str.load(function()
                        var nowNode = $(this);
                        alert("img"+nowNode.attr("nowIndex")+ " success!");
                        $("body").append(nowNode);
                    );

            );
        </script>
    </head>
    <body>
    </body>
</html>

如果需要记录当前i的值，只能记录在标签里面的自定义属性里了。

参考技术B

你好，很高兴为你解答：

for(var i=0;i<imgs.length;i++)
    str = $("<img style='width:200px; height:200px;'/>");
    str = str.attr("src", imgs[i]);
    str = str.attr("index", i);
    //i的正确传值，index随意起名代表索引
    //load函数内部获值方法，$(this).attr("index");
    str.load(function()
         alert("img"+$(this).attr("index")+ " success!");
         $("body").append(str);
    );

//没有明白你所谓 “只有2张图片加载到了页面上，打上断点就完全正常了”，我看见var imgs = [只有两张图的路径]；

//如有疑问继续追问

jquery实现图片预加载

使用jquery实现图片预加载提高页面加载速度和用户体，本就为大家详细分析jquery图片预加载的实现原理。

什么时候使用图片预加载？

如果页面使用了很多不是最初加载便可见的图片，有必要进行预加载：

$.preloadImages = function () {
for (var i = 0; i < arguments.length; i++) {
$(‘img‘).attr(‘src‘, arguments[i]);
}
};
$.preloadImages(‘img/hover-on.png‘, ‘img/hover-off.png‘);

下面我来介绍一种在实际应用中经常会使用到的js预加载的方法。
首先在输出图片的时候我们做一些处理<imgdata="这里是我们要显示图片的实际地址"src="这里是一张默认显示的小图片，可以快速加载到页面。可以是所有图片使用统一的图片也可以是要显示图片的缩略图"alt="图片名"/> 处理完html我们开始写js了，在这里我使用了jquery的类库。

$(‘img[data]‘).load(function(){
var __this__ = $(this);
var url = __this__.attr(‘data‘);
var src = __this__.attr(‘src‘);
if(url ==‘‘|| url == src)//这里判断如果图片实际地址不存在或者已经加载不处理
{
return;
}
var img =newImage();//实例化一个图片的对象
img.src = url;//将要显示的图片加载进来
if(img.complete)//如果图片已经加载存在浏览器缓存中直接处理
{
__this__.attr(‘src‘,url);//将要显示的图片替换过来
return;
}
img.onload =function(){//要显示的图片加载完成后做处理
__this__.attr(‘src‘,url);
}
});

以上是关于学习jquery 中遇到的小问题（有关图片预加载）的主要内容，如果未能解决你的问题，请参考以下文章