Question

我有一幅光彩的网页:<img src='XXX”/>要素ssrc 改为(点击),以显示下一个形象,即贫穷男子 s子一gues。当新形象几乎马上出现时,就能够更快地取得联系。即便是用几秒钟装载,每台浏览器一盘检测器在新图像完全装满之前,仍保持旧形象。

但我很想知道,在新形象被装满时是否发生了大火,使我能够用一点working...... an夫或同时出现的事情。

我知道,我可以把AJAX用于实际工作(如果已经使用 j子的话),但这是一个非常简单的解决办法。除了这一滞后之外,我是否应该放弃改变形象的做法?

Answer 1

你可以就“载荷”活动设立一个手稿。

$( img.whatever )
  .load(function() { /* do stuff */ })
  .attr( src , newURL);

http://www.un.org

$( img.reloadable ).live( load , function() { $(this).show(); });
// ...
$( img#someId ).hide().attr( src , newURL);

edit — whoa, where did that year go? Well, it turns out that one problem with that "live" approach I typed in way back when is that the "load" event does not bubble. Now what you can do, however, is leverage the way that "Image" objects (as opposed to <img> DOM elements) behave. Basically, the function that changes the URL can use an "Image" element as the place to keep the handler. The code that changes the actual "src" attribute of the real <img> tag would then also update the "src" of the "Image" object instance. The browser will only really load the image once (assuming cache control is all cool), but the browser will still call the "onload" handler of the "Image":

(function() {
  var imageObj = new Image();

  imageObj.onload = function() {
    // code to run when image loads from server 
  };

  $( #hypotheticalButton ).click(function() {
    $( #imgToUpdate ).attr( src , newURL);
    imageObj.src = newURL;
  });
})();

Answer 2

你只是把图像带上 j,这样,当用户点击时,下一个形象就已经装上了,而且有误了......除非用户进入你的网页,在装上图像之前就开始点击。

http://engineeredweb.com/blog/09/12/preloading-images-jquery-and-javascript”rel=“nofollow noreferer”>http://engineeredweb.com/blog/09/12/preloading-images-jquery-and-javascript

Answer 3

var slideimg = $( #slideimage );
slideimg.click(function(){
    var img = new Image();
    var url =  url_to_next_image.jpg ;
    $(img).bind( load ,function(){
        $( #loading ).hide();
        slideimg.attr( src ,url);
    }).attr( src ,url);
    $( #loading ).show();
});

这甚至应当与IE的摇摇摇摇摇摇摇摇篮进行处理。

友情链接