Jquery .Load Image，如何检查图像是否已经加载到浏览器中？

发布于 2024-12-13 15:23:25 字数 511 浏览 4 评论 0原文

我编写了一个简单的脚本来将图像加载到主查看器中。非常简单，点击缩略图 - 获取图库 ID 和图像 ID。将它们传递给 .load，加载新内容。

目前，如果您单击拇指，则会加载图像，如果您再次单击同一个拇指，它会再次调用该图像，我不希望这样。我希望能够检查图像是否已加载到浏览器缓存中，如果是，则不执行 .load

感谢您阅读本文，任何帮助将不胜感激。

$('#thumb_list li a').click(function(){

var gallery_id = $(this).attr('gallery');
var image_id = $(this).attr('rel');

$("#image_container")
         .load("inc_photos.cfm?gallery_id=" + gallery_id + "&image_id=" + image_id,
         function(){

         });
return false;
});

原文

I wrote a simple script to load the image in to the main viewer.
Its very simple, click thumbnail - grab the gallery id and the image id..
pass these in to the .load, new content is loaded.

At the moment if you click a thumb the image is loaded, and if you click the same thumb again it calls the image again, I don't want this. I want to be able to check if the image is already loaded in the browser cache and if so to not execute the .load

Thanks for reading this, any help would be appreciated.

$('#thumb_list li a').click(function(){

var gallery_id = $(this).attr('gallery');
var image_id = $(this).attr('rel');

$("#image_container")
         .load("inc_photos.cfm?gallery_id=" + gallery_id + "&image_id=" + image_id,
         function(){

         });
return false;
});

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

焚却相思 2024-12-20 15:23:25

您可以做几件事。
首先，如果您不希望在尝试加载图像后再次单击图像，则可以简单地从图像中删除单击。

$('#thumb_list li a').click(function(){

var gallery_id = $(this).attr('gallery');
var image_id = $(this).attr('rel');

$("#image_container")
         .load("inc_photos.cfm?gallery_id=" + gallery_id + "&image_id=" + image_id,
         function(){
             $('#thumb_list li a').unbind('click');
         });
return false;
});

但是，如果您想使用相同的单击方法执行其他操作，那么您可能需要添加一个标志来检查它是否已经加载。如果您遇到问题，可以在 2 个地方执行此操作。

var isImageLoaded = false;

$('#thumb_list li a').click(function(){

var gallery_id = $(this).attr('gallery');
var image_id = $(this).attr('rel');
if( !isImageLoaded )
{
    $("#image_container")
         .load("inc_photos.cfm?gallery_id=" + gallery_id + "&image_id=" + image_id,
         function(){
             isImageLoaded = true;
         });
}
return false;
});

如果您想避免任何重复的网络流量，也可以通过单击执行此操作：

var isImageLoaded = false;

$('#thumb_list li a').click(function(){

var gallery_id = $(this).attr('gallery');
var image_id = $(this).attr('rel');

if( !isImageLoaded )
{
    $("#image_container")
         .load("inc_photos.cfm?gallery_id=" + gallery_id + "&image_id=" + image_id,
         function(){

         });
}
isImageLoaded = true;
return false;
});

There's a couple of things you can do.
First, you can simply remove the click even from the image if you don't want it to be able to be clicked again after it tries to load.

$('#thumb_list li a').click(function(){

var gallery_id = $(this).attr('gallery');
var image_id = $(this).attr('rel');

$("#image_container")
         .load("inc_photos.cfm?gallery_id=" + gallery_id + "&image_id=" + image_id,
         function(){
             $('#thumb_list li a').unbind('click');
         });
return false;
});

However, if you want to do something else with the same click method, then you might want to add a flag to check if it has already been loaded. You can do this in 2 places if you're having problems with it.

var isImageLoaded = false;

$('#thumb_list li a').click(function(){

var gallery_id = $(this).attr('gallery');
var image_id = $(this).attr('rel');
if( !isImageLoaded )
{
    $("#image_container")
         .load("inc_photos.cfm?gallery_id=" + gallery_id + "&image_id=" + image_id,
         function(){
             isImageLoaded = true;
         });
}
return false;
});

You can also do it on click if you want to avoid any duplicate network traffic:

var isImageLoaded = false;

$('#thumb_list li a').click(function(){

var gallery_id = $(this).attr('gallery');
var image_id = $(this).attr('rel');

if( !isImageLoaded )
{
    $("#image_container")
         .load("inc_photos.cfm?gallery_id=" + gallery_id + "&image_id=" + image_id,
         function(){

         });
}
isImageLoaded = true;
return false;
});

回复收藏 0 原文

~没有更多了~