You need to use what's called a method closure. In layman's terms
(that's what I prefer), it's a function that returns a function.
Here's how I would do what you're trying to do:
google.load('search','1');
function checkImages(){
// Here is the closure!
var myClosure = function(img){return function(){
if(this.results&&this.results.length>0){
var result = this.results[0];
img.src = result.tbUrl;
img.alt = result.titleNoFormatting;
}
}};
var imgs = document.getElementsByTagName('img');
for(var i=0;i<imgs.length;i++){
var img=imgs[i];
if(img.src.match(/no_image.{4}/)){
var is = new google.search.ImageSearch;
is.setSearchCompleteCallback(is, img);
is.execute(img.alt);
}
}
}
google.setOnLoadCallback(checkImages);
You'll notice the method closure in there. Essentially, it's a
function that accepts an img element as an argument. That img element
is then global to everything inside that function, including the
function that is returned. It's kind of like taking a snapshot of what
you're up to at the moment you create the callback.
You'll also notice that I don't rely on one ImageSearch object, but
actually create one ImageSearch for each image. This has the effect of
running a bunch of searches concurrently, rather than in serial (i.e.,
one after the other). Thus, the performance of the site is improved
because we don't have to wait for one search to get done before we can
run the next one.
Jeremy R. Geerdes
Effective website design & development
Des Moines, IA
For more information or a project quote:
http://jgeerdes.home.mchsi.com
http://jgeerdes.blogspot.com
http://jgeerdes.wordpress.com
[email protected]
Unless otherwise noted, any price quotes contained within this
communication are given in US dollars.
If you're in the Des Moines, IA, area, check out Debra Heights
Wesleyan Church!
And check out my blog, Adventures in Web Development, at
http://jgeerdes.blogspot.com
!
On Sep 15, 2009, at 12:36 AM, KevIsAZombie wrote:
>
> Hi all I am not sure how to approach this problem. I have a function
> that is passed an array of HTML img elements. It loops through these
> images checking the SRC attribute for images using a blank "no image"
> thumb nail. It then executes an image search using the img tags ALT
> attribute as the query. The callback function on the search then
> replaces the Img SRC with the first image result.
>
> I am having problems matching up the correct image with the
> corresponding search callback. Right now I am just creating arrays and
> matching the returned search with an index for the images. Since the
> multiple searches run concurrently, depending on the size of the image
> or network latency they can fire the call back out of order and mix up
> the images.
>
> I need an approach that lets me pair individual searches with html
> elements. Would this be possible using a searchController and multiple
> imageSearch objects?
>
> Below is an example of the function I am using
>
> google.load('search', '1');
>
> function googleFillBlanks(jqueryImages){
>
> //namePairs holds the images matching alt text and attachedCount is
> used for matching up once the call back is fired
> var attachedCount = 0;
> var namePairs = [];
>
> function searchComplete(searcher){
> if (searcher.results && searcher.results.length > 0) {
> var results = searcher.results;
> var result = results[0];
> $("img[alt='"+namePairs[attachedCount]+"'] ").attr('src',
> result.tbUrl);
> //jqueryImages.get(0).attr('src', result.tbUrl);
> attachedCount++;
> }
> }
>
> var imageSearch = new google.search.ImageSearch();
>
> //restrict image size
> imageSearch.setRestriction
> (google.search.ImageSearch.RESTRICT_IMAGESIZE,
>
> google.search.ImageSearch.IMAGESIZE_SMALL);
>
> imageSearch.setSearchCompleteCallback(this, searchComplete,
> [imageSearch]);
>
> jqueryImages.each(function(){
> if($(this).attr('src').substr(-12,8) == 'no_image')
> {
> namePairs.push($(this).attr('alt'));
> imageSearch.execute($(this).attr('alt'));
> }
> });
> }
>
> >
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Google AJAX APIs" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to
[email protected]
For more options, visit this group at
http://groups.google.com/group/google-ajax-search-api?hl=en
-~----------~----~----~----~------~----~------~--~---
