Geek Answers Handbook

Get img src using PHP Simple HTML DOM

Demo

I need to get src image from following code

HTML

<div class="avatar profile_CF48B2B4A31B43EC96F0561F498CE6BF "> <a onclick=""> <img id="lazyload_-247847544_0" height="74" width="74" class="avatar potentialFacebookAvatar avatarGUID:CF48B2B4A31B43EC96F0561F498CE6BF" src="http://media-cdn.tripadvisor.com/media/photo-l/05/f3/67/c3/lilrazzy.jpg" /> </a> </div>

I tried to write js :

 foreach($html->find('div[class=profile_CF48B2B4A31B43EC96F0561F498CE6BF] a img') as $element) { $img = $element->getAttribute('src'); echo $img; }

But this shows that the src key does not exist. How can I refuse to view avatar images?

UPDATE:

The image url was not found when I look at the page source, but firebug shows the image url:

<img id='lazyload_1953171323_17' height='24' alt='4 helpful votes' width='25' class='icon lazy'/>

Here is my source page:

 <div class="col1of2"> <div class="member_info"> <div id="UID_3E0FAF58557D3375508A9E5D9A7BD42F-SRC_175428572" class="memberOverlayLink" onmouseover="ta.trackEventOnPage('Reviews','show_reviewer_info_window','user_name_photo'); ta.call('ta.overlays.Factory.memberOverlayWOffset', event, this, 's3 dg rgba_gry update2012', 0, (new Element(this)).getElement('.avatar')&&(new Element(this)).getElement('.avatar').getStyle('border-radius')=='100%'?-10:0);"> <div class="avatar profile_3E0FAF58557D3375508A9E5D9A7BD42F "> <a onclick=> <img id='lazyload_1953171323_15' height='74' width='74' class='avatar potentialFacebookAvatar avatarGUID:3E0FAF58557D3375508A9E5D9A7BD42F'/> </a> </div> <div class="username mo"> <span class="expand_inline scrname hvrIE6 mbrName_3E0FAF58557D3375508A9E5D9A7BD42F" onclick="ta.trackEventOnPage('Reviews', 'show_reviewer_info_window', 'user_name_name_click')">Prataspeles</span> </div> </div> <div class="location"> Latvia </div> </div> <div class="memberBadging"> <div id="UID_3E0FAF58557D3375508A9E5D9A7BD42F-CONT" class="totalReviewBadge badge no_cpu" onclick="ta.trackEventOnPage('Reviews','show_reviewer_info_window','review_count'); ta.util.cookie.setPIDCookie('15984'); ta.call('ta.overlays.Factory.memberOverlayWOffset', event, this, 's3 dg rgba_gry update2012', -10, -50);"> <div class="reviewerTitle">Reviewer</div> <img id='lazyload_1953171323_16' height='24' alt='4 reviews' width='25' class='icon lazy'/> <span class="badgeText">4 reviews</span> </div> <div id="UID_3E0FAF58557D3375508A9E5D9A7BD42F-HV" class="helpfulVotesBadge badge no_cpu" onclick="ta.trackEventOnPage('Reviews','show_reviewer_info_window','helpful_count'); ta.util.cookie.setPIDCookie('15983'); ta.call('ta.overlays.Factory.memberOverlayWOffset', event, this, 's3 dg rgba_gry update2012', -22, -50);"> <img id='lazyload_1953171323_17' height='24' alt='4 helpful votes' width='25' class='icon lazy'/> <span class="badgeText">4 helpful votes</span> </div> </div> </div> " class = "totalReviewBadge badge no_cpu" onclick = "ta.trackEventOnPage ( 'Reviews', 'show_reviewer_info_window', 'review_count'); ta.util.cookie.setPIDCookie ( ' <div class="col1of2"> <div class="member_info"> <div id="UID_3E0FAF58557D3375508A9E5D9A7BD42F-SRC_175428572" class="memberOverlayLink" onmouseover="ta.trackEventOnPage('Reviews','show_reviewer_info_window','user_name_photo'); ta.call('ta.overlays.Factory.memberOverlayWOffset', event, this, 's3 dg rgba_gry update2012', 0, (new Element(this)).getElement('.avatar')&&(new Element(this)).getElement('.avatar').getStyle('border-radius')=='100%'?-10:0);"> <div class="avatar profile_3E0FAF58557D3375508A9E5D9A7BD42F "> <a onclick=> <img id='lazyload_1953171323_15' height='74' width='74' class='avatar potentialFacebookAvatar avatarGUID:3E0FAF58557D3375508A9E5D9A7BD42F'/> </a> </div> <div class="username mo"> <span class="expand_inline scrname hvrIE6 mbrName_3E0FAF58557D3375508A9E5D9A7BD42F" onclick="ta.trackEventOnPage('Reviews', 'show_reviewer_info_window', 'user_name_name_click')">Prataspeles</span> </div> </div> <div class="location"> Latvia </div> </div> <div class="memberBadging"> <div id="UID_3E0FAF58557D3375508A9E5D9A7BD42F-CONT" class="totalReviewBadge badge no_cpu" onclick="ta.trackEventOnPage('Reviews','show_reviewer_info_window','review_count'); ta.util.cookie.setPIDCookie('15984'); ta.call('ta.overlays.Factory.memberOverlayWOffset', event, this, 's3 dg rgba_gry update2012', -10, -50);"> <div class="reviewerTitle">Reviewer</div> <img id='lazyload_1953171323_16' height='24' alt='4 reviews' width='25' class='icon lazy'/> <span class="badgeText">4 reviews</span> </div> <div id="UID_3E0FAF58557D3375508A9E5D9A7BD42F-HV" class="helpfulVotesBadge badge no_cpu" onclick="ta.trackEventOnPage('Reviews','show_reviewer_info_window','helpful_count'); ta.util.cookie.setPIDCookie('15983'); ta.call('ta.overlays.Factory.memberOverlayWOffset', event, this, 's3 dg rgba_gry update2012', -22, -50);"> <img id='lazyload_1953171323_17' height='24' alt='4 helpful votes' width='25' class='icon lazy'/> <span class="badgeText">4 helpful votes</span> </div> </div> </div> " class = "helpfulVotesBadge badge no_cpu" onclick = "ta.trackEventOnPage ( 'Reviews', 'show_reviewer_info_window', 'helpful_count'); ta.util.cookie.setPIDCookie ( ' <div class="col1of2"> <div class="member_info"> <div id="UID_3E0FAF58557D3375508A9E5D9A7BD42F-SRC_175428572" class="memberOverlayLink" onmouseover="ta.trackEventOnPage('Reviews','show_reviewer_info_window','user_name_photo'); ta.call('ta.overlays.Factory.memberOverlayWOffset', event, this, 's3 dg rgba_gry update2012', 0, (new Element(this)).getElement('.avatar')&&(new Element(this)).getElement('.avatar').getStyle('border-radius')=='100%'?-10:0);"> <div class="avatar profile_3E0FAF58557D3375508A9E5D9A7BD42F "> <a onclick=> <img id='lazyload_1953171323_15' height='74' width='74' class='avatar potentialFacebookAvatar avatarGUID:3E0FAF58557D3375508A9E5D9A7BD42F'/> </a> </div> <div class="username mo"> <span class="expand_inline scrname hvrIE6 mbrName_3E0FAF58557D3375508A9E5D9A7BD42F" onclick="ta.trackEventOnPage('Reviews', 'show_reviewer_info_window', 'user_name_name_click')">Prataspeles</span> </div> </div> <div class="location"> Latvia </div> </div> <div class="memberBadging"> <div id="UID_3E0FAF58557D3375508A9E5D9A7BD42F-CONT" class="totalReviewBadge badge no_cpu" onclick="ta.trackEventOnPage('Reviews','show_reviewer_info_window','review_count'); ta.util.cookie.setPIDCookie('15984'); ta.call('ta.overlays.Factory.memberOverlayWOffset', event, this, 's3 dg rgba_gry update2012', -10, -50);"> <div class="reviewerTitle">Reviewer</div> <img id='lazyload_1953171323_16' height='24' alt='4 reviews' width='25' class='icon lazy'/> <span class="badgeText">4 reviews</span> </div> <div id="UID_3E0FAF58557D3375508A9E5D9A7BD42F-HV" class="helpfulVotesBadge badge no_cpu" onclick="ta.trackEventOnPage('Reviews','show_reviewer_info_window','helpful_count'); ta.util.cookie.setPIDCookie('15983'); ta.call('ta.overlays.Factory.memberOverlayWOffset', event, this, 's3 dg rgba_gry update2012', -22, -50);"> <img id='lazyload_1953171323_17' height='24' alt='4 helpful votes' width='25' class='icon lazy'/> <span class="badgeText">4 helpful votes</span> </div> </div> </div>

Are there any problems due to using lazyload?

UPDATE 2

Using lazyload makes my images load after loading pages, I tried to get image ids and compare them with the lazyload js array, but this identifier does not match lazyload var .

Question:

How to get this js array from this JSON ?

Example:

 {"id":"lazyload_-205858383_0","tagType":"img","scroll":true,"priority":100,"data":"http://media-cdn.tripadvisor.com/media/photo-l/05/f3/67/c3/lilrazzy.jpg"} , {"id":"lazyload_-205858383_1","tagType":"img","scroll":true,"priority":100,"data":"http://c1.tacdn.com/img2/icons/gray_flag.png"} , {"id":"lazyload_-205858383_2","tagType":"img","scroll":true,"priority":100,"data":"http://media-cdn.tripadvisor.com/media/photo-l/01/2a/fd/98/avatar.jpg"} , {"id":"lazyload_-205858383_3","tagType":"img","scroll":true,"priority":100,"data":"http://c1.tacdn.com/img2/icons/gray_flag.png"} , {"id":"lazyload_-205858383_4","tagType":"img","scroll":true,"priority":100,"data":"http://media-cdn.tripadvisor.com/media/photo-l/01/2e/70/5e/avatar036.jpg"} , {"id":"lazyload_-205858383_5","tagType":"img","scroll":false,"priority":100,"data":"http://c1.tacdn.com/img2/badges/badge_helpful.png"}
+7
dom html php jquery-lazyload
source share
5 answers

You are having difficulty because javascipt is used to lazily load an image after the page loads. Use phpDom to search for an identifier for an element, and then use a regular expression to search for matching images based on that identifier.

To achieve this, try something like:

 $json = json_decode("<JSONSTRING HERE>"); foreach($html->find('div[class=profile_CF48B2B4A31B43EC96F0561F498CE6BF] a img') as $element) { $imgId = $element->getAttribute('id'); foreach ($json as $lazy) { if ($lazy["id"] == $imgId) echo $lazy["data"]; } }

The above has not been verified, so you will need to allow kinks. They are designed to extract the appropriate javascript and convert it to json.

Alternatively, you can use the string search functions to get a string containing img information and extract the required value.

+4
source share

If you are looking for all identifiers containing a substring, "lazyload", you can try the wildcard selector, and if you find the element found on the "src" property. See Jsfiddle below. Good luck

 $(document.body).find('img[id*=lazyload]').each(function() { console.log($(this).prop('src')); });

Jsfiddle

+3
source share

Try it -

 foreach($html->find('div[class=profile_CF48B2B4A31B43EC96F0561F498CE6BF ] a img') as $element) { $img = $element->getAttribute('src'); echo $img; }

There is a space after the class name. You must add a space at the end of the class name.

OR

use even the full class name

$html->find('div[class=avatar profile_CF48B2B4A31B43EC96F0561F498CE6BF ] a img'

+1
source share

Use the jQuery selector, i.e. $ ('# lazyload_-247847544_0'), and you can get the image source using this

 var src = $('#lazyload_-247847544_0').attr('src');

Or more specifically

 $('.profile_CF48B2B4A31B43EC96F0561F498CE6BF #lazyload_-247847544_0').attr('src');

thanks

+1
source share
 function getReviews(){ $url = 'http://www.tripadvisor.com/Hotel_Review-g274965-d952833-Reviews-Ezera_Maja-Liepaja_Kurzeme_Region.html'; $html = new simple_html_dom(); $html = file_get_html($url); $array = array(); $i = 0; // IMG ID foreach($html->find('div[class=avatar] a img') as $element) { $array[$i]['id'] = $element->getAttribute('id'); $i++;} unset($i);$i = 0; // IMG SRC $p1 = strpos( $html, 'var lazyImgs =' ) + 14; $p2 = strpos( $html, ']', $p1 ); $raw = substr( $html, $p1, $p2 - $p1 ) . ']'; $images = json_decode($raw); foreach ($images as $image){ $id = $image->id; $data = $image->data; foreach ($array as $element){ if ( isset($element['id']) && $element['id'] == $id){ $array[$i]['image'] = $data; $i++; } } } $html->clear(); unset($html); return $array; }

Get the IMG ID in the array. Then scrach var Lazyload in json and decodes. Then compare 2 arrays and if id mach will add data to the array. Thanks everyone!

0
source share

More articles:


All Articles