How to disable scroll-based lazy loading of thumbnails on youtube? - image

I hate this feature, I'm using firefox and I wish it to be gone. Userscript, addon, anything.
The code has:
<script nonce="ziBYfmQtyh1QG-QsCTWRKg">content<script/>
The "content" has this line for every video:
{"richItemRenderer":{"content":{"videoRenderer":{"videoId":"Blcru7OU41k","thumbnail":{"thumbnails":\[{"url":"https://i.ytimg.com/vi/Blcru7OU41k/hqdefault.jpg?sqp=-oaymwEiCKgBEF5IWvKriqkDFQgBFQAAAAAYASUAAMhCPQCAokN4AQ==%5Cu0026rs=AOn4CLDQiFXmnf31H-gy3rz5GD-mWDnYuw%22,%22width%22:168,%22height%22:94%7D,%7B%22url%22:%22https://i.ytimg.com/vi/Blcru7OU41k/hqdefault.jpg?sqp=-oaymwEiCMQBEG5IWvKriqkDFQgBFQAAAAAYASUAAMhCPQCAokN4AQ==%5Cu0026rs=AOn4CLDYZ7fHwLPA5VTzM1gQ40q8ZF-hDQ%22,%22width%22:196,%22height%22:110%7D,%7B%22url%22:%22https://i.ytimg.com/vi/Blcru7OU41k/hqdefault.jpg?sqp=-oaymwEjCPYBEIoBSFryq4qpAxUIARUAAAAAGAElAADIQj0AgKJDeAE=%5Cu0026rs=AOn4CLDuj9mh9uH-DiL4zHfeCxL0tOkg4A%22,%22width%22:246,%22height%22:138%7D,%7B%22url%22:%22https://i.ytimg.com/vi/Blcru7OU41k/hqdefault.jpg?sqp=-oaymwEjCNACELwBSFryq4qpAxUIARUAAAAAGAElAADIQj0AgKJDeAE=%5Cu0026rs=AOn4CLDDROOHBu_SDYf0xkgTYdvGRKeKag%22,%22width%22:336,%22height":188}\]}
Thumbnail isn't loaded:
<yt-image class="style-scope ytd-thumbnail" alt="" ftl-eligible="" notify-on-loaded="" notify-on-unloaded=""
<img class="style-scope ytd-thumbnail"\>\<img alt="" style="background-color: transparent;" class="yt-core-image--fill-parent-height yt-core-image--fill-parent-width yt-core-image yt-core-image--content-mode-scale-aspect-fill"
</yt-image\>
Thumbnail is loaded:
<yt-image class="style-scope ytd-thumbnail" alt="" ftl-eligible="" notify-on-loaded="" notify-on-unloaded=""
<img class="style-scope ytd-thumbnail"><img alt="" style="background-color: transparent;" class="yt-core-image--fill-parent-height yt-core-image--fill-parent-width yt-core-image yt-core-image--content-mode-scale-aspect-fill yt-core-image--loaded" src="https://i.ytimg.com/vi/Blcru7OU41k/hqdefault.jpg?sqp=-oaymwEiCKgBEF5IWvKriqkDFQgBFQAAAAAYASUAAMhCPQCAokN4AQ==&rs=AOn4CLDQiFXmnf31H-gy3rz5GD-mWDnYuw"></yt-image>
</yt-image>
Tried everything, every addon. I think youtube uses some unique technique.

Related

Thymeleaf - Image to act as Hyperlink

Using Thymeleaf, how can I make an image act as a hyperlink?
The Thymeleaf Documentation says nothing about images and I tried using standard HTML for this issue but none of the below attempts made my image an active hyperlink.
<a th:href="#{/user/myUser}">
<img src="../../static/images/image.jpg" alt="logo"/>
</a>
<a href="https://www.w3schools.com">
<img src="../../static/images/image.jpg" alt="logo"/>
</a>
<a href="/oauth2/authorization/google">
<img alt="Google Login" title="Google login"
th:src="#{/images/login-with-google.png}" />
</a>

Using scrapy extract the url of image

I am using scrapy to scrape images. I notice that some image url is specified by #src,like the following:
<a href="http://www.wandoujia.com/apps/com.uu">
<img src="http://img.wdjimg.com/mms/icon/v1/5/09/14687d011083dc84036fc68dc3c80095_68_68.png" width="68" height="68" alt="UU电话" class="icon">
</a>
Some are different:
<a href="http://www.wandoujia.com/apps/com.hcsql.shengqiandianhua">
<img data-original="http://img.wdjimg.com/mms/icon/v1/6/44/a27006acfbe8b6aa39bee49c6f004446_68_68.png" alt="省钱电话" class="icon lazy" width="68" height="68" src="http://img.wdjimg.com/mms/icon/v1/6/44/a27006acfbe8b6aa39bee49c6f004446_68_68.png" style="display: block;">
</a>
I use the following code to extract. The result is : 1)if only the src occur, the #src is the real link of image; 2) if the data-original occurs, the #data-original is the real link,#src is not. So my question is what should i do if I want to extract the url of the image under the both two cases.
sel.xpath('/a/img/#src').extract()
You can try:
sel.xpath('//a/img[not(#data-original)]/#src | //a/img/#data-original').extract()

Empty images in wordpress

sorry for my English.
I have installed wordpress theme “Dynamix”. Dynamix uses plugin WPBakery Visual Composer. When I insert “Single Image” in post, then image have empty src. Example:
<a class="fancybox galleryimg blackwhite " style="width:200px" data-fancybox-group="gallerygdgrid_1" title="Controller" href="http://localhost/wp-content/uploads/2013/07/circle1.png">
<img class="gallery-img " width="200" height="200" alt="Controller" src="" style="visibility: visible; opacity: 1;">
</a>
When I insert image using wordpress embedded “insert media” window all works fine.
Where is the problem?
Thanks You!

Joomla turns image into Read:more link

I got a problem with Joomla. I created a MenuItemType Category Blog which perfectly lists all the articles of a single category. Nevertheless I got a problem when I create an article for the category. Joomla automatically turns all images into readmore links. For instance
<p>
<img alt="" src="image.JPG" style="width: 180px; height: 79px;" />
</p>
will turn into
<a href="/index.php/en/news/24-zweite-news" title="Read more: Zweite News">
<img src="image.JPG" width="180" height="79" class="multithumb_blog" style="border: ;" alt="Read more: Zweite News">
</a>
I cannot find any configuration parameter to change this behaviour.

How to stop auto-refresh onclick from thumbnails?

I have an image gallery on my site that uses thumbnails that enlarge above the thumbnail line when clicked on. I'm having an issue with the auto-refresh; every time I click one of the thumbnails, the page refreshes, which restores it to the "master image".
I'm not (and sort of refuse, on the grounds that I believe all this can be done with simple CSS and HTML) using anything fancy to write this code, despite my knowledge of HTML being amateur at best.
Here's a sample of the code. Let me know if you need to see a different piece of it.
<div id="rightcol">
<img name="ImageOnly. src='#' /><img src="#" />
</div>
<div id="leftcol"> <div>
<a href="" onclick="ImageOnly.src='#'"><img src="#" />
</div>
Edit: Somehow I seem to have fixed this issue by changing
<a href="" onclick="ImageOnly.src='#'">
to
<a href="#" onclick="ImageOnly.src='#'">
Not really sure why this worked but would love an explanation...?
Why not just use some simple ajax/javascript .innerHTML? instead of trying to stop the auto refresh that occurs when you click on a hyperlink that has #. That way you could update the rightcol synchroniously.
HTML
<div id="rightcol">
<img name="ImageOnly.src" src='#' />
</div>
<div id="leftcol">
<img src="#" />
</div>
AJAX Script
function ajaxMove(src)
{
var image = '<img src="'+src+'" alt="my transferred image" />';
document.getElementById('rightcol').innerHTML = image;
}
How is it used?
Request the object from the onclick event.
Build an image tag based off the information in the object.
Transfer the new image tag to the element with the id 'rightcol'
Other options
You could also remove the href="#" from the <a> tag and work directly from the onclick event and then apply style="cursor:pointer;". Then it will work like a regular hyperlink but without the refresh.
<a onclick="javascript:ajaxMove('ImageOnly.src')" style="cursor:pointer;" >Click Me</a>

Resources